I need to update multiple properties on my application state with single reducer. Later I'm using bineReducers redux helper that bines all the reducers. Problem is, all the other reducers operate one level down from the root of the state (that is, on a property), except this one that I need to pass the whole state to.

How do I use the bineReducers function to pass the root state?

const App = bineReducers({
  pages: bineReducers({
    browse: bineReducers({
      numOfItems: loadMoreItems,
      filter: setFilter
    })
  }),
  <rootState>: openPage,
  favoriteItems: addItemToFavorites,
  inBasketItems: addItemToBasket
})

What do I place in <rootState> ?

I need to update multiple properties on my application state with single reducer. Later I'm using bineReducers redux helper that bines all the reducers. Problem is, all the other reducers operate one level down from the root of the state (that is, on a property), except this one that I need to pass the whole state to.

How do I use the bineReducers function to pass the root state?

const App = bineReducers({
  pages: bineReducers({
    browse: bineReducers({
      numOfItems: loadMoreItems,
      filter: setFilter
    })
  }),
  <rootState>: openPage,
  favoriteItems: addItemToFavorites,
  inBasketItems: addItemToBasket
})

What do I place in <rootState> ?

• javascript
• ecmascript-6
• redux

• Possible duplicate of Read Store's Initial State in Redux Reducer – Ilanus Commented Jan 21, 2017 at 15:58
• It did help to understand some things better, but can't find the answer there. – Aurimas Commented Jan 21, 2017 at 16:33

3 Answers 3

The Redux docs cover this topic in the section Structuring Reducers - Beyond bineReducers. Basically, you need to use more than just bineReducers to acplish what you want. I also give an example of writing some custom reducer structuring logic in my recent blog post Practical Redux, Part 7: Form Change Handling, Data Editing, and Feature Reducers.

After some refactoring I found that best is not to use bineReducers in this situation at all. Instead I structured my root reducer like so:

const App = (state = initialState, action) => {
  state = Object.assign({}, state)

  switch (action.type) {
    case OPEN_PAGE:
      state = openPage(state, action)
    case LOAD_MORE_ITEMS:
      state.pages.browse.numOfItems = loadMoreItems(state.pages.browse.numOfItems, action)
    case SET_FILTER:
      state.pages.browse.filter = setFilter(state.pages.browse.filter, action)
    case ADD_ITEM_TO_FAVORITES:
      state.favoriteItems = addItemToFavorites(state.favoriteItems, action)
    case ADD_ITEM_TO_BASKET:
      state.inBasketItems = addItemToBasket(state.inBasketItems, action)
  }

  return state
}

Maybe it would make sense to use bineReducers if any of reducers that work on particular part of state were more plicated, but it worked like this for me. I still kept some boilerplate in sub-reducers for readability purpose, like so:

const loadMoreItems = (state = initialState.pages.browse.numOfItems, action) => {
  switch (action.type) {
    case LOAD_MORE_ITEMS:
      return state = action.number
    default:
      return state
  }
}

So basically I keep the state initialization and action name since it makes it easier to understand what this reducer is all about.

If I understood you well, you could define another reducer called rootState and simple pass it to bine reducer as any other reducer.

On the other hand, if you want to update several reducers with the same action, you just need to add a case in each reducer the action should change the state.