Skip to content

Commit eb9e1f7

Browse files
MrWolfZMrWolfZ
committed
feat(recipes): add recipe for "using simplux in my application that already uses Redux"
1 parent 09b2830 commit eb9e1f7

7 files changed

Lines changed: 193 additions & 2 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ Here are some recipes that will show you how **simplux** can make life simple fo
2727

2828
### Advanced
2929

30-
- [using **simplux** in my application that already uses Redux](recipes/advanced/using-in-redux-application#readme) (work-in-progress)
30+
- [using **simplux** in my application that already uses Redux](recipes/advanced/using-in-redux-application#readme)
3131
- [debugging with Redux DevTools](recipes/advanced/debugging-with-redux-devtools#readme) (work-in-progress)
3232
- [reacting to state changes](recipes/advanced/reacting-to-state-changes#readme) (work-in-progress)
3333
- [organizing my application state](recipes/advanced/organizing-application-state#readme) (work-in-progress)

‎recipes/advanced/using-in-redux-application/README.md‎

Lines changed: 68 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,71 @@ If you are new to **simplux** there is [a recipe](../../basics/getting-started#r
66

77
> You can play with the code for this recipe in this [code sandbox](https://codesandbox.io/s/github/MrWolfZ/simplux/tree/master/recipes/advanced/using-in-redux-application).
88
9-
This recipe is still a work-in-progress.
9+
Before we start let's install all the packages we need.
10+
11+
```sh
12+
npm i @simplux/core redux -S
13+
```
14+
15+
Now we're ready to go.
16+
17+
For this recipe we assume we have a very simple existing application that uses redux to manage a counter. In your application this setup is probably quite a bit more complex with many more reducers, middlewares and such. All of these things do not affect **simplux**, so you can keep them just as they are.
18+
19+
```ts
20+
import { combineReducers, createStore, Reducer } from 'redux'
21+
22+
const counterReducer: Reducer<number> = (c = 0, { type }) =>
23+
type === 'INC' ? c + 1 : c
24+
25+
const rootReducer = combineReducers({
26+
counter: counterReducer,
27+
})
28+
29+
const store = createStore(rootReducer)
30+
```
31+
32+
**simplux** is built on top of Redux. However, instead of wrapping Redux it is designed to seamlessly compose with it. To achieve this **simplux** exports its root reducer which you can place anywhere in your reducer hierarchy. Therefore, we only need to make a slight adjustment to the store setup above.
33+
34+
```ts
35+
import { getSimpluxReducer } from '@simplux/core'
36+
37+
const rootReducer = combineReducers({
38+
counter: counterReducer,
39+
40+
// this key can be anything, but it is recommended to name the
41+
// slice of state that simplux is responsible for "simplux"
42+
simplux: getSimpluxReducer(),
43+
})
44+
```
45+
46+
Now there is only one more step that is required. We need to let **simplux** know about our new store.
47+
48+
```ts
49+
import { setReduxStoreForSimplux } from '@simplux/core'
50+
51+
setReduxStoreForSimplux(
52+
store,
53+
54+
// this second parameter tells simplux where in the state it
55+
// can find its slice
56+
s => s.simplux,
57+
)
58+
```
59+
60+
Now we can start creating modules.
61+
62+
```ts
63+
const { getState } = createSimpluxModule({
64+
name: 'mySimpluxModule',
65+
initialState: {
66+
value: 'mySimpluxState',
67+
},
68+
})
69+
70+
console.log('my module state:', getState())
71+
console.log('full redux state:', store.getState())
72+
```
73+
74+
And that is all you need to use **simplux** in your application that already uses Redux.
75+
76+
Have a look at our [other recipes](../../../../..#recipes) to learn how **simplux** can help you make your life simple in other situations.

‎recipes/advanced/using-in-redux-application/index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html lang="">
3+
<head>
4+
<meta charset="UTF-8" />
5+
</head>
6+
<body>
7+
<div>Please open the console to see the output of this program.</div>
8+
</body>
9+
</html>

‎recipes/advanced/using-in-redux-application/package.json‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "@simplux/recipes.advanced.using-in-redux-application",
3+
"version": "0.3.0-alpha.3",
4+
"description": "This recipe shows how simple it is to get started using simplux",
5+
"main": "src/index.ts",
6+
"scripts": {
7+
"start": "webpack-dev-server --mode development --progress --color"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/MrWolfZ/simplux.git"
12+
},
13+
"bugs": {
14+
"url": "https://github.com/MrWolfZ/simplux/issues"
15+
},
16+
"homepage": "https://github.com/MrWolfZ/simplux/tree/master/recipes/advanced/using-in-redux-application#readme",
17+
"keywords": [
18+
"recipe",
19+
"redux",
20+
"simplux",
21+
"typescript"
22+
],
23+
"author": "Jonathan Ziller <jonathan.ziller@gmail.com> (https://www.github.com/MrWolfZ)",
24+
"license": "MIT",
25+
"private": true,
26+
"dependencies": {
27+
"@simplux/core": "0.3.0-alpha.3",
28+
"redux": "^4.0.1"
29+
},
30+
"devDependencies": {
31+
"html-webpack-plugin": "^3.2.0",
32+
"ts-loader": "^6.0.2",
33+
"typescript": "^3.5.1",
34+
"webpack": "^4.32.2",
35+
"webpack-cli": "^3.3.2",
36+
"webpack-dev-server": "^3.5.1"
37+
}
38+
}

‎recipes/advanced/using-in-redux-application/src/index.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
// this code is part of the simplux recipe "using simplux in my
2+
// application that already uses Redux":
3+
// https://github.com/MrWolfZ/simplux/tree/master/recipes/advanced/using-in-redux-application
4+
5+
import {
6+
createSimpluxModule,
7+
getSimpluxReducer,
8+
setReduxStoreForSimplux,
9+
} from '@simplux/core'
10+
import { combineReducers, createStore, Reducer } from 'redux'
11+
12+
// let's say our application currently consists of a single simple
13+
// counter reducer
14+
const counterReducer: Reducer<number> = (c = 0, { type }) =>
15+
type === 'INC' ? c + 1 : c
16+
17+
// when building your root reducer you can add a special reducer
18+
// that simplux provides
19+
const rootReducer = combineReducers({
20+
counter: counterReducer,
21+
22+
// this key can be anything, but it is recommended to name the
23+
// slice of state that simplux is responsible for "simplux"
24+
simplux: getSimpluxReducer(),
25+
})
26+
27+
// now we can construct our redux store as normal, allowing us to
28+
// use all the redux goodies we are used to like middlewares
29+
const store = createStore(rootReducer)
30+
31+
// the final thing we need to integrate simplux into this store is
32+
// to let simplux know about it
33+
setReduxStoreForSimplux(
34+
store,
35+
36+
// this second parameter tells simplux where in the state it
37+
// can find its slice
38+
s => s.simplux,
39+
)
40+
41+
// now you are ready to use simplux
42+
const { getState } = createSimpluxModule({
43+
name: 'mySimpluxModule',
44+
initialState: {
45+
value: 'mySimpluxState',
46+
},
47+
})
48+
49+
console.log('my module state:', getState())
50+
console.log('full redux state:', store.getState())

‎recipes/advanced/using-in-redux-application/tsconfig.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"compilerOptions": {
3+
"sourceMap": true,
4+
"strict": true,
5+
"noUnusedLocals": true,
6+
"noUnusedParameters": true,
7+
"lib": ["dom", "es2015"]
8+
}
9+
}

‎recipes/advanced/using-in-redux-application/webpack.config.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const HtmlWebpackPlugin = require('html-webpack-plugin')
2+
3+
module.exports = {
4+
devtool: 'inline-source-map',
5+
entry: './src/index.ts',
6+
plugins: [new HtmlWebpackPlugin({ template: './index.html' })],
7+
module: {
8+
rules: [
9+
{
10+
test: /\.tsx?$/,
11+
loader: 'ts-loader',
12+
},
13+
],
14+
},
15+
resolve: {
16+
extensions: ['.ts', '.tsx', '.js'],
17+
},
18+
}

0 commit comments

Comments
 (0)
⚡