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

【问题标题】：How to implement React useReducer for multiple state objects in a single provider如何在单个提供者中为多个状态对象实现 React useReducer
【发布时间】：2020-06-15 16:32:45
【问题描述】：

我们在一个提供者中拥有三个相关但独立的巨大状态对象，并且不确定哪种方式更好地实现 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)

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

【问题讨论】：

标签： javascript reactjs react-hooks use-reducer

【解决方案1】：

如果这三个巨大的状态对象不相互通信，并且每个都将在不同的子应用程序中使用，我会按照redux style guide - Only One Redux Store Per App 的建议将 reducer 拆分为单独的提供程序

【讨论】：