Skip to content

Commit 8d78e49

Browse files
committed
Update store.md
1 parent f5a90cd commit 8d78e49

File tree

1 file changed

+42
-9
lines changed

1 file changed

+42
-9
lines changed

docs/store.md

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,58 @@
33
The store has the following responsibilities:
44

55
* Holds application state
6-
* Allows access to state via the `getState` method
7-
* Allows state to be updated via the `dispatch` method
8-
* Registers listeners via the `subscribe` method
6+
* Allows access to state via `getState`
7+
* Allows state to be updated via `dispatch`
8+
* Registers listeners via `subscribe`
99

1010
####Initialization
1111

12-
The simplest way to initialize the store is to call `createStore` with a reducer function. The following example has both a `counter` reducer and a `todos` reducer, so they need to be combined into a single reducer using the `combineReducers` function.
12+
To intialize a store you simply call `createStore` with a reducer.
13+
14+
```js
15+
import { createStore } from 'redux';
16+
import counter from './reducers/counter';
17+
18+
const store = createStore(counter);
19+
```
20+
21+
A redux store works with a single reducer, but in the following example we would like to use the functionality of 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:
22+
23+
```js
24+
import { createStore } from 'redux';
25+
import counter from './reducers/counter';
26+
import todos from './reducers/todos';
27+
28+
// set up the initial combined state
29+
const initialState = {
30+
counterState: undefined,
31+
todoState: undefined
32+
};
33+
34+
function combinedReducer(state = initialState, action) {
35+
// call each reducer separately
36+
const counterState = counter(state.counterState, action);
37+
const todoState = todos(state.todoState, action);
38+
39+
// combine updated state created by each reducer into the new combined state
40+
return { counterState, todoState };
41+
}
42+
43+
const store = createStore(combinedReducer);
44+
```
45+
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.
1347

1448
```js
1549
import { createStore, combineReducers } from 'redux';
16-
import { Provider } from 'react-redux';
17-
import counter from 'reducers/counter';
18-
import todos from 'reducers/todos';
50+
import counter from './reducers/counter';
51+
import todos from './reducers/todos';
1952

20-
const reducer = combineReducers({counter, todos});
53+
const reducer = combineReducers({ counter, todos });
2154
const store = createStore(reducer);
2255
```
2356

24-
A recommended pattern is to create the object passed to `combineReducers` from a definition file.
57+
A recommended pattern is to import the object passed to `combineReducers` from a definition file.
2558

2659
```js
2760
// reducers/index.js

0 commit comments

Comments
 (0)