Reading 39

CombineReducers(reducers)

As your app grows more complex, you'll want to split your reducing function into separate functions, each managing independent parts of the state.

The combineReducers helper function turns an object whose values are different reducing functions into a single reducing function you can pass to createStore.

The resulting reducer calls every child reducer, and gathers their results into a single state object. The state produced by combineReducers() namespaces the states of each reducer under their keys as passed to combineReducers()

Example:

 rootReducer = combineReducers({potato: potatoReducer, tomato: tomatoReducer})
 // This would produce the following state object
 {
   potato: {
     // ... potatoes, and other state managed by the potatoReducer ...
   },
   tomato: {
     // ... tomatoes, and other state managed by the tomatoReducer, maybe some nice sauce? ...
   }
 }

You can control state key names by using different keys for the reducers in the passed object. For example, you may call combineReducers({ todos: myTodosReducer, counter: myCounterReducer }) for the state shape to be { todos, counter }.

A popular convention is to name reducers after the state slices they manage, so you can use ES6 property shorthand notation: combineReducers({ counter, todos }). This is equivalent to writing combineReducers({ counter: counter, todos: todos }).