CODEWITHSUNDEEP
reactjsreduxreact-redux
David Turton
David Turton

Reputation: 385

React.js render components two different elements

I am in the process of transitioning an application into React. This being the case I need to be able to render components to two different elements on the dom which I am accomplishing as such:

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

  ReactDOM.render(
    <Provider store={store}>
      <Search />
    </Provider>
    , document.getElementById('root-search'));

My issue now is trying to share the state between components which I am not sure why its not working as I am passing the Provider store to both. Updates on one and not being affected to the other.

Upvotes: 0

Views: 335

Answers (1)

Pineda
Pineda

Reputation: 7593

Unless you have a legitimate reason for having more than one store, it's recommended to use only one.

You can achieve a shared state with your components by having one provider:

ReactDOM.render(
  <Provider store={store}>
    <div>
      <Results />
      <Search />
    </div>
  </Provider> ,
  document.getElementById('root'));

Upvotes: 1

Related Questions