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

[kfrajtak]

Hi,
I am creating 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 reducer I used.

The reduces is created with combineReducers method

const rootReducer = combineReducers({
  appReducer
})

The initial state is

const initialState = {
  sources: [], 
  left: {}, 
  right: {},
  diff: {} 
}

However in the component function mapStateToProps:

function mapStateToProps(state) {
  return {
    sources: state.sources
  }
}

The state.sources is undefined because the value of state parameter is

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

Is this a feature of redux? So when I use more reducers all of them will add new property to state variable? Or is there something wrong on my side (I never noticed this behavior in redux tutorials).

Thanks

[mxstbr]

That is a feature, so you can have the same property in multiple reducers.

Imagine later on in your application you have an image grid. (totally arbitrary example) It has a list of images and a title, and the imageGridReducer initial state is:

const initialState = {
  title: 'My image grid',
  sources: [], // 💥
}

then you combine that reducer with your appReducer:

const rootReducer = combineReducers({
  appReducer, // { sources: [], left: {}, right: {}, diff: {} }
  imageGridReducer, // { sources: [], 💥  title: '' }
})

BOOM What happens now? Do the two sources get merged?? Do they get prefixed?? Do they get deleted??

combineReducers stores them under a key you specify, so you avoid this problem and don't have to worry if you have a property with the same name in another reducer.

---

What I'd do is:

const rootReducer = combineReducers({
  app: appReducer
});

function mapStateToProps(state) {
  return {
    sources: state.app.sources
  }
}

[gaearon]

@mxstbr Thanks for a quick good answer :+1:
@kfrajtak I’m closing but let us know if something is still unclear, we’re happy to help.

[kfrajtak]

Much clearer now, thanks for the explanation!

[mxstbr]

No worries, glad I could help!

[gaearon]

I also wrote an answer here: http://stackoverflow.com/a/35674297/458193