17

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 reducer I used.

The root reducer 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

6
  • 2
    your code is correct state.appReducer. sources you need the reducer name Feb 27, 2016 at 9:44
  • 4
    Imagine you have 2,3 reducers every reducer has sources property Feb 27, 2016 at 9:46
  • 1
    you can get specific sources by state.appReducer. sources and ` state.appReducer.2 sources` Feb 27, 2016 at 9:47
  • 2
    What you're describing is part of what combineReducers does. Feb 27, 2016 at 12:05
  • 1
    you need to set "state = initialState.sources" in a appReducer to update/access specific state Jan 20, 2017 at 6:41

2 Answers 2

31

If you only have a single reducer, you don’t need combineReducers(). Just use it directly:

const initialState = {
  sources: [],
  left: {},
  right: {}
}
function app(state = initialState, action) {
  switch (action.type) {
  case 'ADD_SOURCE':
    return Object.assign({}, state, {
      sources: [...state.sources, action.newSource]
    })
  case 'ADD_SOURCE_TO_LEFT':
    return Object.assign({}, state, {
      left: Object.assign({}, state.left, {
        [action.sourceId]: true
      })
    })
  case 'ADD_SOURCE_TO_RIGHT':
    return Object.assign({}, state, {
      right: Object.assign({}, state.right, {
        [action.sourceId]: true
      })
    })
  default:
    return state
  }
}

Now you can create a store with that reducer:

import { createStore } from 'redux'
const store = createStore(app)

And connect a component to it:

const mapStateToProps = (state) => ({
  sources: state.sources
})

However your reducer is hard to read because it update many different things at once. Now, this is the moment you want to split it into several independent reducers:

function sources(state = [], action) {
  switch (action.type) {
  case 'ADD_SOURCE':
    return [...state.sources, action.newSource]
  default:
    return state
  }
}

function left(state = {}, action) {
  switch (action.type) {
  case 'ADD_SOURCE_TO_LEFT':
    return Object.assign({}, state, {
      [action.sourceId]: true
    })
  default:
    return state
  }    
}

function right(state = {}, action) {
  switch (action.type) {
  case 'ADD_SOURCE_TO_RIGHT':
    return Object.assign({}, state, {
      [action.sourceId]: true
    })
  default:
    return state
  }    
}

function app(state = {}, action) {
  return {
    sources: sources(state.sources, action),
    left: left(state.left, action),
    right: right(state.right, action),
  }
}

This is easier to maintain and understand, and it also makes it easier to change and test reducers independently.

Finally, as the last step, we can use combineReducers() to generate the root app reducer instead of writing it by hand:

// function app(state = {}, action) {
//   return {
//     sources: sources(state.sources, action),
//     left: left(state.left, action),
//     right: right(state.right, action),
//   }
// }

import { combineReducers } from 'redux'
const app = combineReducers({
  sources,
  left,
  right
})

There is no large benefit to using combineReducers() instead of writing the root reducer by hand except that it’s slightly more efficient and will likely save you a few typos. Also, you can apply this pattern more than once in your app: it’s fine to combine unrelated reducers into a single reducer several times in a nested way.

All this refactoring would have no effect on the components.

I would suggest you to watch my free Egghead course on Redux which covers this pattern of reducer composition and shows how combineReducers() is implemented.

1
  • Thanks Dan for explanation and the link to those videos. Feb 28, 2016 at 12:17
6

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]
2
  • You're right. Should I then change the initialState object accordingly? Feb 28, 2016 at 12:14
  • 3
    The idea is each branch of the reducer is responsible for its own initialState. Your root reducer should have no initialState, and each reducer should only include its stuff. So your appReducer would be an object with keys for sources, left, right, etc. Feb 28, 2016 at 14:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.