我的index.jsReactJS 项目中的文件中有此代码，我希望 redux 的<Provider>标签将它们包装起来，以便它们都可以访问同一个商店，
问题是，我该怎么做？
ReactDOM.render(<Header />, document.getElementById('header'));
ReactDOM.render(<App />, document.getElementById('root'));
ReactDOM.render(<Footer />, document.getElementById('footer'));
好吧，如果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'));
正如另一个答案已经暗示的那样，这可以通过在 Redux 提供程序中使用相同的存储来实现。由于 Redux 不依赖于 React 组件层次结构，因此连接的组件不一定应该有一个共同的父级：
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 应用程序一起使用的选项是为这些组件使用门户，如以下答案所示：
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 正文中以安装应用程序的占位符元素在哪里，并且不必是标题等元素的父元素。
此选项也可以与 React 上下文 APIProvider或页面组件一起使用state。
是否有理由需要定位三个 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 正文将如下所示（Facebook 的create-react-app推荐的方法）：
<body>
<noscript>JavaScript must be enabled to run this application.</noscript>
<div id="root"></div>
</body>