多个 React 渲染组件：如何共享 state？

Question

我正在使用 React 和 Typescript 在同一个 static 页面上创建和管理多个小组件，到目前为止效果非常好。 我有一些上下文包含在 state 提供程序组件中，如下所示：

ReactDOM.render(
  <StateProvider>
    <Reps />
  </StateProvider>,
  document.getElementById("react-reps")
);

ReactDOM.render(
  <StateProvider>
    <Script />
  </StateProvider>,
  document.getElementById("react-script")
);

尽管在两种渲染方法中都使用了StateProvider ，但每一种都是一个单独的实例，并且具有独立的 state。

我想在这些组件之间分享一些 state，尽管据我所知，我可能不得不手动推送更新而不是依赖 React（因为更新将超越对 ReactDom.render 的调用）但我仍然可以t 弄清楚是否有规范的方法来实现这一点。 我一直在通过事件推动一些 state，这对于用户采取的行动非常有效，但对于采取行动 onload 来说不太好，因为我不想依赖首先加载哪个组件的时间。

在这两个或更多组件之间自动或手动共享一些state 的最佳方法是什么？

编辑：下面的评论是关于如何从 redux 共享商店是我想要实现的事情，但我更愿意使用我现在拥有的上下文而不是引入 redux 作为依赖项。 这如何与上下文一起工作？

Answer 1

尝试使用 Redux 和 React-redux 进行 state 管理和不同组件之间的数据传输。 它既方便又专业。 它的工作方式有点不同，但是一旦你得到它，它就很容易管理。