title: Using Multiple React Providers simultaneously to render components
body: <p>I have two components <code>&lt;App/&gt;</code> and <code>&lt;PitPage/&gt;</code> both of them are similar and utilizes another component <code>&lt;PitComponents/&gt;</code> in them. Both of these components are being used under <code>&lt;Provider/&gt;</code> provided by React and using the same store that i have created. Note that on dispatching events (inside file <code>vanillaRedux.js</code> )
  this line <code>&lt;PitComponents uName="Badari Krishna" user={this.props.create.users[0].name}/&gt;</code> in <code>App.js</code> yields correct answer output "BK" but i'm expecting the similar should happen in <code>PitPage.js</code> where it is showing <code>users</code> to be undefined. Please let me know where i am going wrong. screenshots or results are attached as well.</p>
  
  <p>index.html (below)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" /&gt;
      &lt;meta
        name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no"
      /&gt;
      &lt;meta name="theme-color" content="#000000" /&gt;
  
      &lt;link rel="manifest" href="%PUBLIC_URL%/manifest.json" /&gt;
  
      &lt;title&gt;React App&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;!-- binds App.js code here --&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
  
  
      &lt;!-- binds PitPage code here --&gt;
      &lt;div id="pit"&gt;&lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>index.js (below)</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  import {Provider} from 'react-redux';
  import globalStore from './components/pit/vanillaRedux';
  
  
  ReactDOM.render(&lt;Provider store={globalStore}&gt;&lt;App /&gt; &lt;/Provider&gt;, document.getElementById('root'));
  
  serviceWorker.unregister();
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/lDcgA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lDcgA.png" alt="enter image description here"></a></p>
  
  <p>App.js (below)</p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  import vanillaRedux from './components/pit/vanillaRedux';
  
  import PitComponents from  './components/pit/PitComponents';
  import {connect} from 'react-redux';
  
  class App extends Component {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
            &lt;img src={logo} class="App-logo" alt="logo" /&gt;
            &lt;p&gt;
              Edit &lt;h1&gt;src/App.js&lt;/h1&gt; and save to reload.
            &lt;/p&gt;
            &lt;a
              class="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            &gt;
              Learn React
            &lt;/a&gt;
          &lt;/header&gt;
          &lt;PitComponents uName="UserName" user={this.props.create.users[0].name}/&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps= (state) =&gt;{
  
    return {
        create: state.userCreateReducer
    }
  
  };
  
  const mapDispatchToProps= (dispatch) =&gt; {
    return {
        setName: () =&gt; {
            dispatch({
                    type: "DELETE",
                    id:3
            });
        }
    }
  }
  
  
  export default connect(mapStateToProps,mapDispatchToProps)(App);
  </code></pre>
  
  <p>PitPage.js (below)</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import PitComponents from  './PitComponents';
  
  import {connect} from 'react-redux';
  import {Provider} from 'react-redux';
  import globalStore from './vanillaRedux';
  
  
  class PitPage extends React.Component{
  
  
      render(){
          return(
              &lt;PitComponents uName="user" user={this.props.create.users[0].name}/&gt; &lt;!--this is where error is thrown saying "user" undefined --&gt;
  
          );
      }
  
  }
  
  const mapStateToProps= (state) =&gt;{
  
      return {
          create: state.userCreateReducer
      }
  
    };
  
  const mapDispatchToProps= (dispatch) =&gt; {
      return {
          setName: () =&gt; {
              dispatch({
                      type: "DELETE",
                      id:3
              });
          }
      }
  }
  
  
  ReactDOM.render(&lt;Provider store={globalStore}&gt;&lt;PitPage /&gt;&lt;/Provider&gt; , document.getElementById('pit'));
  
  export default connect(mapStateToProps,mapDispatchToProps) (PitPage);
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/DZHGQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DZHGQ.png" alt="enter image description here"></a></p>
  
  <p>vanillaRedux.js (below)</p>
  
  <pre><code>import {createStore, applyMiddleware} from 'redux';
  import { combineReducers } from 'redux';
  import logger from 'redux-logger';
  
  const usersInitialState = {
  
      exmple: 'Example',
      users: []
  };
  
  
  const userCreateReducer = (state = usersInitialState,action) =&gt;{
  
  
      switch(action.type){
  
          case "CREATE":
          console.log("CREATE called..!!");
          state = {
              ...state,
              users: [...state.users,action.user]
          };
  
          break;
  
      }
  
      return state;
  
  };
  
  const globalStore = createStore(userCreateReducer,applyMiddleware(logger) );
  
  globalStore.subscribe(() =&gt; {
      console.log('globalStore updated --&gt;',globalStore.getState());
  });
  
  globalStore.dispatch({
  
      type: "CREATE",
      user: {  
          id: 1,
          name: 'BK',
          age: 23,
          }
  });
  </code></pre>
  
  <p>PitComponents.js (below)</p>
  
  <pre><code>import React from 'react';
  
  class PitComponents extends React.Component{
  
      constructor(props){
          super(props);
        }
  
      render(){
          return(
              &lt;div&gt;
                  &lt;h1&gt; Welcome {this.props.name} &lt;/h1&gt;
                  &lt;p&gt; This is PIT 1 &lt;/p&gt;
                  &lt;p&gt; From Redux --&gt; {this.props.user} &lt;/p&gt;
              &lt;/div&gt;
  
          );
      }
  
  }
  
  
  export default PitComponents;
  </code></pre>