Redux reducers initializing same state key

Question

I\'m messing around with the \'simplest-redux-example\' on github and I\'ve added a second reducer that decrements state.count. If I have the increment and decrement reducers i

Answer 1

You're so close! The catch is that when you use combineReducers it actually splits the "state" such that the states of the reducers you feed in are properties on the "state" object.

As such, in order to feed them default parameters as follows: let store = createStore(rootReducer, {counter: {count: 0}, decrementer: {count:0}});

Answer 2

The reducers passed to combineReducers get different pieces of the state object.

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.

(Emphasis mine)

So, the internal state object would look like

{
  counter: result of passing `state.counter` into counter reducer
  decrementer: result of passing `state.decrementer` into decrementer reducer
}

This is analogous to having separate stores in a flux application, where each store both operates its own "piece" of the global app state.

Since you actually want these two reducers to work on the same portion of the state object, you actually want something more like reduce-reducers, though it's very easy to implement yourself—just pass the state into each reducer in turn, reducing the initial state with the new state from each reducer.

In fact, it's so simple, the implementation is just a few lines:

export default function reduceReducers(...reducers) {
  return (previous, current) =>
    reducers.reduce(
      (p, r) => r(p, current),
      previous
    );
}

and your rootReducer would be

const rootReducer = reduceReducers(counter, decrementer);