wrap multiple react DOM component in redux's P

I have this code on my index.js file in my ReactJS project and I want the redux's <Provider> tag to wrap them up so that they can all access the same store,
The question is, how can I do that?

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

标签： javascript reactjs redux react-dom

3条回答

老娘就宠你

2楼-- · 2019-07-30 16:41

As another answer already suggests, this can be achieved by using same store in Redux provider. Since Redux isn't tied to React component hierarchy, connected components don't necessarily should have a common 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')
);

Another option that isn't specific to Redux but can also be used with any React application that has several root components is to use portals for these components, as shown in 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'));

Where <div id="page"></div> is placeholder element that exists in HTML body to mount the application and doesn't have to be a parent to header, etc. elements.

This option can be used with React context API Provider or page component state as well.

0人赞添加讨论(0) 举报

啃猪蹄的小仙女

3楼-- · 2019-07-30 16:47

Is there a reason that you need to target three html elements? The standard practice here would be to just target root and handle the rest in your React application, like below:

In index.js:

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

In App.js:

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

Your entire HTML body would look like this (recommended approach by Facebook's create-react-app):

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

0人赞添加讨论(0) 举报

太酷不给撩

4楼-- · 2019-07-30 16:59

Well, if the store is the same, then you can simply apply the <Provider> to all pieces and they will all use the same Redux store. The Provider is not mandatory to be unique, just the store. Something like this:

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'));

0人赞添加讨论(0) 举报

wrap multiple react DOM component in redux's P

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间