javascript - 如何在单个提供者中为多个状态对象实现 React useReducer

Question

我们在一个提供者中拥有三个相关但独立的巨大状态对象，并且不确定哪种方式更好地实现 useReducer。

我们正在迁移以使用 useReducer 并且很难将它们全部粘在一个初始状态中。

const initialStateA = {
  ...
}

const initialStateB = {
  ...
}

const initialStateC = {
  ...
}

选项 1：一个单一的 'mainReducer' 来管理一切

const mainReducer = ({reducerA, reducerB, reducerC}, action) => {
  // reducerA + reducerB + reducerC....
}

const [state, dispatch] = useReducer(mainReducer, {...initialStateA, ...initialStateB, ...initialStateC})

选项 2：拥有三个单独的 useReducer

const [stateA, dispatchA] = useReducer(reducerA, initialStateA)
const [stateB, dispatchB] = useReducer(reducerB, initialStateB)
const [stateC, dispatchC] = useReducer(reducerC, initialStateC)

哪种方法更好？每个的优点/缺点是什么，或者两者之间几乎没有/没有区别？

Answer 1

如果这三个巨大的状态对象不相互通信，并且每个都将在不同的子应用程序中使用，我会按照redux 样式指南的建议将 reducer 拆分为单独的提供程序 - 每个应用程序只有一个 Redux Store