React/redux combineReducers issue

Question

I'm trying to combine two reducers with redux: increment and decrement reducers.

In my store.js file:

With this line import reducer from "./reducers/increment"; the button increment works.

With this line import reducer from "./reducers/decrement"; the button decrement works.

With this line import reducer from "./reducers/index"; the counter does not even display.

My code is given here.

What am I doing wrong please ?

What if the two reducer states have the same counter value ? Which is the source of truth if the value of counter is modified ?

Thank you for your help.

Answer 1

I'm assuming this is a substitute example for your real code, but I would recommend combining the actions into one reducer, called counter so that there is one source for the current counter state.

You should do this because in your mapStateToProps function inside SiblingTwo.js, you need to do:

const mapStateToProps = (state, ownProps) => ({
    counter: state.increment.counter
});

It's either state.increment.counter or state.decrement.counter, so it only makes sense to combine the reducers into one originally and call state.counter.counter.

Your current code is not working because you are incorrectly calling counter: state.counter