mirror of
https://github.com/microsoft/frontend-bootcamp.git
synced 2026-01-26 14:56:42 +08:00
Clearer picture of what step 2.5 combinereducer looks like
This commit is contained in:
@@ -64,23 +64,34 @@ We'll write our reducers with the help of some utilities from the official [`red
|
|||||||
|
|
||||||
#### 1. Organize reducers according to the keys of the state tree object
|
#### 1. Organize reducers according to the keys of the state tree object
|
||||||
|
|
||||||
|
Given a state tree shaped like:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
{
|
||||||
|
todos: {
|
||||||
|
[id: string]: TodoItem,
|
||||||
|
},
|
||||||
|
|
||||||
|
filter: 'all' | 'complete' | 'active'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
We would organize our reducers matching the keys of the state tree:
|
||||||
|
|
||||||
```ts
|
```ts
|
||||||
import { createReducer } from 'redux-starter-kit';
|
import { createReducer } from 'redux-starter-kit';
|
||||||
|
import { combineReducer } from 'redux';
|
||||||
// first argument: initial state
|
|
||||||
// second argument: object whose keys correspond to possible values of action.type
|
|
||||||
const todosReducer = createReducer({}, {
|
|
||||||
addTodo: (state, action) => ...
|
|
||||||
});
|
|
||||||
|
|
||||||
const filterReducer = createReducer('all', {
|
|
||||||
setFilter: (state, action) => ...
|
|
||||||
});
|
|
||||||
|
|
||||||
const reducer = combineReducer({
|
const reducer = combineReducer({
|
||||||
todos: todosReducer,
|
// first argument: initial state
|
||||||
filter: filterReducer
|
// second argument: object whose keys correspond to possible values of action.type
|
||||||
});
|
todos: createReducer({}, {
|
||||||
|
addTodo: (state, action) => { /* ... */}
|
||||||
|
}),
|
||||||
|
filter: createReducer('all', {
|
||||||
|
setFilter: (state, action) => ...
|
||||||
|
})
|
||||||
|
})
|
||||||
```
|
```
|
||||||
|
|
||||||
#### 2. Write the reducers with mutables
|
#### 2. Write the reducers with mutables
|
||||||
|
|||||||
Reference in New Issue
Block a user