Javascript 如何在单个提供程序中为多个状态对象实现React useReducer

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

我们正在迁移使用UpReRever，很难将它们全部粘贴到一个初始状态。

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:有三个单独的用户教育者

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

---

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

如果这三个巨大的状态对象彼此不通信，并且每一个都将在不同的子应用程序中使用，我会按照