Question

说，我有这样的商店：

{
  modules: {
    myModule: {
      aFlag: true,
      anotherFlag: false,
      nestedItem: {...}
    },
    ...
  },
  entities: {...},
  ...
}

和modules reducer是combineReducers({myModule: myModuleReducer}) 在myModuleReducer内部我想将nestedItem的处理委托给另一个reducer，因此myModuleReducer会处理aFlag和anotherFlag的操作，而nestedItem则会由nestedReducer处理。

我该怎么做？如果我为这些标志创建一个嵌套的命名空间，那么combineReducers就很容易了，即如果我有

myModule: {flags: {aFlag: true, anotherFlag: false}, nestedItem: {...}}

我可以做myModuleReducer = combineReducers({flags: flagReducer, nestedItem: nestedReducer}) 但是，如果我不想为这些标志创建命名空间并希望myModuleReducer处理这些标记，而我希望nestedReducer处理nestedItem，该怎么办？

我想出了一个＆＃34;模式＆＃34;像这样，使用reduce-reducers包：

const nestedReducers = combineReducers({
  // defaults for slices of state not handled by nested reducers
  aFlag: (state = initialState.aFlag) => state,
  anotherFlag: (state = initialState.anotherFlag) => state,
  // nested reducers for particular slices of state
  nestedItems: nestedReducer
});

然后

const finalReducer = reduceReducers(nestedReducers, myModuleReducer);

这种方式似乎使nestedReducer句柄nestedItems切片和myModuleReducer处理状态的顶级部分（即aFlag和anotherFlag字段）

但我不喜欢我需要为嵌套的reducer处理的所有内容传递这些默认函数。可以避免吗？（当然，我可以将其抽象为某种nestReducers助手，但仍然如此）。一般来说，我的方法有什么问题？

Answer 1

您可以随时在myModuleReducer功能中手动执行此操作，如下所示：

function myModuleReducer(state = someInitialState, action) {

    // Call nestedReducer here
    const reducedNestedItem = nestedReducer(state, action)

    switch (action.type) {
    case 'MY_ACTION_TYPE':
        return Object.assign({}, state, {
            aFlag: // aFlag logic
            anotherFlag: // anotherFlag logic
            nestedItem: reducedNestedItem
        })
    default:
        return state
    }
}

你只需要确保你这样做是否符合Redux的纯洁哲学。

将reducer嵌套在redux中

1 个答案: