如何在 combineReducers 中使用根级别的初始状态？

Question

我需要使用单个 reducer 更新应用程序状态的多个属性。后来我使用了combineReducers redux 帮助器，它结合了所有的减速器。问题是，除了我需要将整个状态传递给的那个之外，所有其他减速器都从状态的根（即属性）向下运行一层。

如何使用combineReducers函数传递根状态？

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

我在<rootState> 中放置什么？

Answer 1

Redux 文档在 Structuring Reducers - Beyond combineReducers 部分中介绍了这个主题。基本上，你需要使用的不仅仅是just combineReducers 来完成你想要的。我还在我最近的博文Practical Redux, Part 7: Form Change Handling, Data Editing, and Feature Reducers 中给出了编写一些自定义reducer 结构逻辑的示例。

Answer 2

经过一些重构，我发现在这种情况下最好不要使用combineReducers。相反，我像这样构建了我的根减速器：

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
}

如果在状态的特定部分工作的任何减速器更复杂，那么使用combineReducers 可能是有意义的，但它对我来说就像这样。为了便于阅读，我仍然在 sub-reducers 中保留了一些样板，如下所示：

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

所以基本上我保留了状态初始化和动作名称，因为这样更容易理解这个 reducer 的全部内容。

Answer 3

如果我理解你的话，你可以定义另一个名为 rootState 的减速器，然后简单地将它传递给组合减速器，就像任何其他减速器一样。

另一方面，如果你想用相同的 action 更新多个 reducer，你只需要在每个 reducer 中添加一个 case，action 应该会改变 state。