Question

我有一个看起来像这样的缩减器reducerA

reducerA = {
  A: [],
  B: {},
  C: {},
  D: [],
};

我有另一个看起来像这个

的缩减器reducerB

reducerB = {
  E: {},
}

我想要做的是将reducerB合并到reducerA并获得看起来像这样的东西

reducerA = {
  A: [],
  B: {},
  C: {},
  D: [],
  reducerB: {
    E: {}
  },
};

在reducerA函数中触发对状态变量A，B，C和D的更改，并且仍然在reducerB函数中触发状态变量E的更改。

我已尝试使用combineReducers。但显然，它将reducerA和reducerB结合为外部减速器的子项。这需要我在reducerA内访问状态变量reducerA.reducerA.A

export default {
  reducerA: combinedReducers({reducerA, reducerB})
}

我想知道这个问题是否有临床解决方案。我找到了很多能解决问题的库。但是我仍然不情愿他们，如果可能的话，我希望在没有他们的情况下解决这个问题。

Answer 1

const reducerA = (state, action) => {
  const newState = {}
  switch (action.type) {
    case someaction:
      newState = {
        A: [],
        B: {},
        C: {},
        D: [],
      }
    default:
      newState = {
        ...state
      }
  }
  return {
    ...newState,
    reducerB: reducerB(state, action)
  }
}

这应该可以解决您的问题。 ; d

Answer 2

我认为你要求的是反对redux reducer概念并打破封装。如果你想创建一个在reducerA和reducerB的状态中继的reducer，你应该发送 actions ，它们分别是reducerA和reducerB，并且不依赖于其他reducer。

无论如何，当您使用react-redux时，我建议使用mapDispatchToProps，您可以在其中创建组件道具的全局状态映射，例如：

const mapStateToProps = state => {
  return state.reducerA.foo + state.reducerB.bar
}

connect(mapStateToProps)(YourComponent)

将减速器合并为另一个减速器的关键

2 个答案: