Javascript 可以在React中组合上下文状态吗？

我正在构建一个具有一些复杂状态的应用程序，并尝试使用React钩子处理该状态。所以我需要多个这样的上下文提供程序：

export default function Provider({ children }) {
  const [state, dispatch] = useReducer(reducer, {});

  const update = useCallback(payload=> {
    dispatch({ type: UPDATE, payload});
  }, []);

  return (
    <TestContext.Provider
      value={useMemo(() => {
        return {
          state,
          update
        };
      }, [state, update])}
    >
      {children}
    </TestContext.Provider>
  );
}

数据从多个不同的来源获取和更新，因此为了保持代码干净，我希望将上下文提供程序拆分为多个提供程序，并且仍然有一个状态，其中包含所有提供程序状态的所有

输入

和

输出

---

任何想法和建议都将不胜感激。

您可以使用多个上下文，也可以包装提供者。您可以使用多个上下文，也可以包装提供者。

state: {
  inputs: {N objects}
  outputs: {M objects}
}