State in redux/react app has a property with the name of the reducer

Question

I am creating an app using Redux and React. I run into a problem where I cannot map state to component properties since the state has a property that matches the name of the red

Answer 1

Actually, I believe your initial state would be:

{
  appReducer: {
    sources: [],
    left: {},
    right: {},
    diff: {}
  }
}

This is because combineReducers works by taking the name of the reducer, and mapping its contents to that name.

Also, just a note, but if you're going to use more than 1 reducer, the names of your reducers should be more specific than appReducer, and (just my personal opinion) they don't need the word reducer. A typical app might look like this:

combineReducers({
  user: userReducer,
  messages: messagesReducer,
  notifications: notificationsReducer
});

Then, your state could be accessed like:

state.user.email
state.messages[0]