|
3 | 3 | The store has the following responsibilities:
|
4 | 4 |
|
5 | 5 | * 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` |
9 | 9 |
|
10 | 10 | ####Initialization
|
11 | 11 |
|
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. |
13 | 47 |
|
14 | 48 | ```js
|
15 | 49 | 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'; |
19 | 52 |
|
20 |
| -const reducer = combineReducers({counter, todos}); |
| 53 | +const reducer = combineReducers({ counter, todos }); |
21 | 54 | const store = createStore(reducer);
|
22 | 55 | ```
|
23 | 56 |
|
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. |
25 | 58 |
|
26 | 59 | ```js
|
27 | 60 | // reducers/index.js
|
|
0 commit comments