title: How to share redux store in multiple components
body: <p>Hi I have one component in which I integrated the redux in my react application. I am opening second then third component. I don't want the pass the data which I obtained in first component to second then third in props.</p>
  
  <p>I want to do this using redux store. Is there any way to do this ?</p>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from "react";
  import logo from "./logo.svg";
  import "./App.css";
  import RoundedButton from "./RoundedButton";
  import { connect } from "react-redux";
  import { bindActionCreators } from "redux";
  import * as actions from "./actions/index";
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        score: 0,
        status: "",
        userSelected: "",
        computerSelected: "",
        visibility: [true, true, true],
        buttonVisibility: false
      };
      this.clickitem = this.clickitem.bind(this);
      this.handlePlayAgain = this.handlePlayAgain.bind(this);
    }
  
    handlePlayAgain() {
      this.setState({
        buttonVisibility: false,
        visibility: [true, true, true]
      });
    }
  
    clickitem(user) {
      var url = "http://localhost:4000/generate-random";
      this.setState({ userSelected: user });
  
      fetch(url)
        .then(response =&gt; {
          if (response.status &gt;= 400) {
            throw new Error("Bad response from server");
          }
          return response.json();
        })
        .then(data =&gt; {
          var computer = data.item;
          this.setState({ computerSelected: computer });
          if (
            (user === "Rock" &amp;&amp; computer === "Scissors") ||
            (user === "Paper" &amp;&amp; computer === "Rock") ||
            (user === "Scissors" &amp;&amp; computer === "Paper")
          ) {
            this.props.increment();
          } else if (user === computer) {
            this.props.doNothing();
          } else {
            this.props.decrement();
          }
  
          console.log(user + " " + computer);
          console.log("------------------------------------");
  
          App.contextTypes = { store: React.PropTypes.object };
          let store = this.context.store;
          console.log(store);
  
          arrayvar = [];
  
          var arrayvar = [];
          if (user === "Rock" &amp;&amp; computer === "Rock") {
            arrayvar = [true, false, false];
          } else if (user === "Paper" &amp;&amp; computer === "Paper") {
            arrayvar = [false, true, false];
          } else if (user === "Scissors" &amp;&amp; computer === "Scissors") {
            arrayvar = [false, false, true];
          } else if (
            (user === "Rock" &amp;&amp; computer === "Paper") ||
            (user === "Paper" &amp;&amp; computer === "Rock")
          ) {
            arrayvar = [true, true, false];
          } else if (
            (user === "Rock" &amp;&amp; computer === "Scissors") ||
            (user === "Scissors" || computer === "Rock")
          ) {
            arrayvar = [true, false, true];
          } else if (
            (user === "Paper" &amp;&amp; computer === "Scissors") ||
            (user === "Scissors" || computer === "Paper")
          ) {
            arrayvar = [false, true, true];
          }
          this.setState({ visibility: arrayvar });
          this.setState({
            buttonVisibility: true
          });
        });
    }
  
    render() {
      return (
        &lt;div className="CenterDiv"&gt;
          &lt;div className="AppTitle"&gt;
            &lt;b&gt;Score: {this.props.score}&lt;/b&gt;
            &lt;div&gt;
              {this.state.visibility[0]
                ? &lt;RoundedButton
                    text="Rock"
                    clickitem={this.clickitem}
                    label={
                      this.state.userSelected === "Rock" &amp;&amp;
                        this.state.computerSelected === "Rock"
                        ? "User &amp; Computer Selected"
                        : this.state.userSelected === "Rock"
                          ? "User Selected"
                          : this.state.computerSelected === "Rock"
                            ? "Computer Selected"
                            : ""
                    }
                  /&gt;
                : null}
              {this.state.visibility[1]
                ? &lt;RoundedButton
                    text="Paper"
                    clickitem={this.clickitem}
                    label={
                      this.state.userSelected === "Paper" &amp;&amp;
                        this.state.computerSelected === "Paper"
                        ? "User &amp; Computer Selected"
                        : this.state.userSelected == "Paper"
                          ? "User Selected"
                          : this.state.computerSelected === "Paper"
                            ? "Computer Selected"
                            : ""
                    }
                  /&gt;
                : null}
              {this.state.visibility[2]
                ? &lt;RoundedButton
                    text="Scissors"
                    clickitem={this.clickitem}
                    label={
                      this.state.userSelected === "Scissors" &amp;&amp;
                        this.state.computerSelected === "Scissors"
                        ? "User &amp; Computer Selected"
                        : this.state.userSelected === "Scissors"
                          ? "User Selected"
                          : this.state.computerSelected === "Scissors"
                            ? "Computer Selected"
                            : ""
                    }
                  /&gt;
                : null}
            &lt;/div&gt;
  
            &lt;div className="Status"&gt;{this.props.status}&lt;/div&gt;
  
            {this.state.buttonVisibility
              ? &lt;button onClick={this.handlePlayAgain} style={{ margin: 30 }}&gt;
                  Play Again
                &lt;/button&gt;
              : null}
  
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    return { score: state.score, status: state.status };
  }
  
  export default connect(mapStateToProps, actions)(App);
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import App from "./App";
  import registerServiceWorker from "./registerServiceWorker";
  import "./index.css";
  
  import { Provider } from "react-redux";
  import { createStore } from "redux";
  import scoreReducer from "./reducers";
  
  let store = createStore(scoreReducer);
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;&lt;App /&gt;&lt;/Provider&gt;,
    document.getElementById("root")
  );
  registerServiceWorker();
  </code></pre>
  
  <p>secondcomponent.js</p>
  
  <pre><code>export default class SecondComponent extends Component {
    render() {
      return (
         // print score which is in redux
      );
    }
  }
  </code></pre>
  
  <p>third component.js</p>
  
  <pre><code>export default class ThirdComponent extends Component {
    render() {
      return (
         // print score which is in redux
      );
    }
  }
  </code></pre>
  
  <p>Whats the way to have an access of redux store in multiple components ?</p>