How to use the initial state at root level in combineReducers?

Question

I need to update multiple properties on my application state with single reducer. Later I'm using combineReducers redux helper that combines 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 combineReducers function to pass the root state?

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

What do I place in <rootState> ?

Answer 1

The Redux docs cover this topic in the section Structuring Reducers - Beyond combineReducers. Basically, you need to use more than just combineReducers to accomplish 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.

Answer 2

After some refactoring I found that best is not to use combineReducers 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 combineReducers if any of reducers that work on particular part of state were more complicated, 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.