Skip to content

Commit 5a61131

Browse files
committed
Merge pull request #590 from ghengeveld/patch-1
Don't recommend the use of `import * as reducers`.
2 parents 96045e3 + a223805 commit 5a61131

File tree

1 file changed

+26
-14
lines changed

1 file changed

+26
-14
lines changed

docs/api/combineReducers.md

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,15 @@ reducing function you can pass to [`createStore`](createStore.md).
77

88
The resulting reducer calls every child reducer, and gather their results into a single state object. The shape of the state object matches the keys of the passed `reducers`.
99

10-
>##### A Note for Flux Users
10+
> ##### A Note for Flux Users
1111
12-
>This function helps you organize your reducers to manage their own slices of state, similar to how you would have different Flux Stores to manage different state. With Redux, there is just one store, but `combineReducers` helps you keep the same logical division between reducers.
12+
> This function helps you organize your reducers to manage their own slices of state, similar to how you would have different Flux Stores to manage different state. With Redux, there is just one store, but `combineReducers` helps you keep the same logical division between reducers.
1313
1414
#### Arguments
1515

16-
1. `reducers` (*Object*): An object whose values correspond to different reducing functions that need to be combined into one. One handy way to obtain it is to use ES6 `import * as reducers` syntax, but you can also construct this object manually. See the notes below for some rules every passed reducer must follow.
16+
1. `reducers` (*Object*): An object whose values correspond to different reducing functions that need to be combined into one. See the notes below for some rules every passed reducer must follow.
17+
18+
> Earlier documentation suggested the use of the ES6 `import * as reducers` syntax to obtain the reducers object. This was the source of a lot of confusion, which is why we now recommend exporting a single reducer obtained using `combineReducers()` from `reducers/index.js` instead. An example is included below.
1719
1820
#### Returns
1921

@@ -35,19 +37,23 @@ While `combineReducers` attempts to check that your reducers conform to some of
3537

3638
#### Example
3739

38-
#### `reducers.js`
40+
#### `reducers/todos.js`
3941

4042
```js
41-
export function todos(state = [], action) {
43+
export default function todos(state = [], action) {
4244
switch (action.type) {
4345
case 'ADD_TODO':
4446
return state.concat([action.text]);
4547
default:
4648
return state;
4749
}
4850
}
51+
```
4952

50-
export function counter(state = 0, action) {
53+
#### `reducers/counter.js`
54+
55+
```js
56+
export default function counter(state = 0, action) {
5157
switch (action.type) {
5258
case 'INCREMENT':
5359
return state + 1;
@@ -59,19 +65,25 @@ export function counter(state = 0, action) {
5965
}
6066
```
6167

68+
#### `reducers/index.js`
69+
70+
```js
71+
import { combineReducers } from 'redux';
72+
import todos from './todos';
73+
import counter from './counter';
74+
75+
export default combineReducers({
76+
todos,
77+
counter
78+
});
79+
```
80+
6281
#### `App.js`
6382

6483
```js
6584
import { createStore, combineReducers } from 'redux';
85+
import reducer from './reducers/index';
6686

67-
import * as reducers from './reducers';
68-
console.log(reducers);
69-
// {
70-
// todos: Function,
71-
// counter: Function
72-
// }
73-
74-
let reducer = combineReducers(reducers);
7587
let store = createStore(reducer);
7688
console.log(store.getState());
7789
// {

0 commit comments

Comments
 (0)