React - 使用商店注入、多页面应用程序包装 redux 提供程序中的所有组件

Question

我创建了一个看起来像

的 hoc

const withStore = Component => {
  const storeWrapper = props => (
    <ReduxProvider store={store}>
      <Component {...props } />
    </ReduxProvider>
  );

  return storeWrapper; 
};

现在我所有的独立组件都被这个（它的多页面应用程序）包裹起来，这样它们就可以连接到同一个商店，但事实并非如此，一个组件正在连接，随着道具的传入变化而变化。但是其他组件完全断开连接，没有显示任何更改，存储中的数据正在更改。

有没有人之前尝试过这种方法？

举个例子——如果我有 componentA 和 componentB，用这个 hoc 包装。从 componentA 派发的任何存储更改都会被 componentA 反映出来。 componentB 也一样。主要问题是分派来自 componentA 而它没有读取 componentB。反之亦然

Answer 1

如@orel 的评论所述，我通过将存储存储在全局变量中来解决它。

在 store.js 文件中，为了在任何地方都保持单一实例，我添加了一个条件

if (!window.store) {
  window.store = store;
}

现在效果很好！！

React - 使用商店注入、多页面应用程序包装 redux 提供程序中的所有组件

React - Wrapping all components in redux provider with store injection, Multi page app

javascript

reactjs

redux

react-redux