在 redux 的 Provider 中包装多个 react DOM 组件

Question

我的 ReactJS 项目中的 index.js 文件中有这段代码，我希望 redux 的 <Provider> 标签将它们包装起来，以便它们都可以访问同一个商店，
问题是，我该怎么做？

ReactDOM.render(<Header />, document.getElementById('header'));
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<Footer />, document.getElementById('footer'));

Answer 1

好吧，如果 store 相同，那么您可以简单地将 <Provider> 应用于所有部分，它们都将使用相同的 Redux 存储。 Provider 不是唯一的，只是 store。像这样：

const store = createStore(...); // or any valid Redux store declaration or import

ReactDOM.render(<Provider store={store}><Header /></Provider>, document.getElementById('header'));
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
ReactDOM.render(<Provider store={store}><Footer /></Provider>, document.getElementById('footer'));

Answer 2

您是否需要定位三个 html 元素？这里的标准做法是只定位 root 并在 React 应用程序中处理其余部分，如下所示：

在index.js中：

const store = createStore(...);
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>, document.getElementById('root'));

在App.js中：

export default = () =>
  <Header />
  <Body />
  <Footer />

你的整个 HTML body 看起来像这样（Facebook create-react-app 推荐的方法）：

<body>
  <noscript>JavaScript must be enabled to run this application.</noscript>
  <div id="root"></div>
</body>

Answer 3

正如另一个答案已经暗示的那样，这可以通过在 Redux 提供程序中使用相同的商店来实现。由于 Redux 不依赖于 React 组件层次结构，连接的组件不一定应该有一个共同的 parent:

ReactDOM.render(
  <Provider store={store}><Header /></Provider>,
  document.getElementById('header')
);
ReactDOM.render(
  <Provider store={store}><App /></Provider>, 
  document.getElementById('root')
);
ReactDOM.render(
  <Provider store={store}><Footer /></Provider>,
  document.getElementById('footer')
);

另一个不特定于 Redux 但也可以与任何具有多个根组件的 React 应用程序一起使用的选项是为这些组件使用门户，如 this answer:

所示

const Page = props => (
  <Provider store={store}>    
      {ReactDOM.createPortal(<Header/>, document.getElementById('header'))} 
      {ReactDOM.createPortal(<App/>, document.getElementById('root'))} 
      {ReactDOM.createPortal(<Footer/>, document.getElementById('footer'))}
  </Provider>
);

ReactDOM.render(<Page/>, document.getElementById('page'));

其中 <div id="page"></div> 是存在于 HTML 中的占位符元素 body 以安装应用程序并且不必是 parent 到 header等元素。

此选项也可以与 React 上下文 API Provider 或页面组件 state 一起使用。

在 redux 的 Provider 中包装多个 react DOM 组件

wrap multiple react DOM component in redux's Provider

javascript

reactjs

redux

react-dom