Skip to content

Commit 2bb3769

Browse files
committed
Update store.md
1 parent 1d207ba commit 2bb3769

File tree

1 file changed

+30
-16
lines changed

1 file changed

+30
-16
lines changed

docs/store.md

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,48 +13,62 @@ To intialize a store you simply call `createStore` with a reducer:
1313

1414
```js
1515
import { createStore } from 'redux';
16-
import counter from './reducers/counter';
16+
import counterReducer from './reducers/counter';
1717

18-
const store = createStore(counter);
18+
const store = createStore(counterReducer);
1919
```
2020

21-
`createStore` intializes the store with a single reducer, but in the following example we would like to use functionality from both the `counter` and `todos` reducers. To do this we need to somehow combine `counter` and `todos` into a single reducer. Here is one approach:
21+
`createStore` intializes the store with a single reducer, but in the following example we would like to use functionality from both the `counter` and `todos` reducers. To do this we need to somehow combine `counter` and `todos` into a single reducer. Here is one approach:
2222

2323
```js
2424
import { createStore } from 'redux';
25-
import counter from './reducers/counter';
26-
import todos from './reducers/todos';
25+
import counterReducer from './reducers/counter';
26+
import todosReducer from './reducers/todos';
2727

2828
// set up the initial combined state
2929
const initialState = {
3030
counterState: undefined,
3131
todoState: undefined
3232
};
3333

34-
function combinedReducer(state = initialState, action) {
34+
function masterReducer(state = initialState, action) {
3535
// call each reducer separately
36-
const counterState = counter(state.counterState, action);
37-
const todoState = todos(state.todoState, action);
36+
const counterState = counterReducer(state.counterState, action);
37+
const todoState = todosReducer(state.todoState, action);
3838

3939
// combine updated state created by each reducer into the new combined state
4040
return { counterState, todoState };
4141
}
4242

43-
const store = createStore(combinedReducer);
43+
const store = createStore(masterReducer);
4444
```
4545

46-
As combining reducers is so common there is a helper function named `combineReducers` to assist. `combineReducers` takes an object of reducers and returns them combined into a single reducer. Here is the previous example using `combineReducers`:
46+
Combining reducers is very common so there is a helper function named `combineReducers` to assist. `combineReducers` takes an object of reducers and combines them into a single reducer. Here is the previous example using `combineReducers`:
4747

4848
```js
4949
import { createStore, combineReducers } from 'redux';
50-
import counter from './reducers/counter';
51-
import todos from './reducers/todos';
50+
import counterReducer from './reducers/counter';
51+
import todosReducer from './reducers/todos';
5252

53-
const reducer = combineReducers({ counter, todos });
54-
const store = createStore(reducer);
53+
const reducers = {
54+
counter: counterReducer,
55+
todos: todosReducer
56+
}
57+
58+
const masterReducer = combineReducers(reducers);
59+
const store = createStore(masterReducer);
60+
```
61+
62+
Note that the key of each reducer in the reducer object passed to `combineReducers` becomes a top-level key on the state object returned by the combined reducer. In the previous example, the state object returned by `masterReducer` looks like this:
63+
64+
```js
65+
const state = {
66+
counter: counterState,
67+
todos: todosState
68+
};
5569
```
5670

57-
A recommended pattern is to import the object passed to `combineReducers` from a definition file:
71+
A recommended pattern is to use `import *` to import an object of reducers from a definition file:
5872

5973
```js
6074
// reducers/index.js
@@ -85,7 +99,7 @@ const store = createStore(reducer, initialState);
8599

86100
####Usage
87101

88-
Store state is accessed using the `getState` method. Note that the name of each reducer in the object passed to `combineReducers` becomes a top-level key on the state object.
102+
Store state is accessed using the `getState` method.
89103

90104
```js
91105
store.getState();

0 commit comments

Comments
 (0)