title: React Redux state is lost at page refresh
body: <p>in my react app I have 3 components. from the 1st component by a button, I use Link to go to the 2nd component. at the 2nd I create a state (redux store), manipulate it and when manipulation is finished by submitting button I redirect to the 3rd component. at the 3rd component, I also see the state (by redux chrome tool) but here when I refresh the page (the webpack thing when a code is changed and saved), I lose the sate and get an empty Object.</p>
  <p>this is the structure of my app.</p>
  <p><strong>index.js</strong></p>
  <pre><code>const store = createStore(
    rootReducer,
    composeWithDevTools(applyMiddleware(thunk))
  );
  
  ReactDOM.render(
    &lt;BrowserRouter&gt;
      &lt;Provider store={store}&gt;
        &lt;Route component={App} /&gt;
      &lt;/Provider&gt;
    &lt;/BrowserRouter&gt;,
    document.getElementById(&quot;root&quot;)
  );
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>const App = ({ location }) =&gt; (
    &lt;Container&gt;
      &lt;Route location={location} path=&quot;/&quot; exact component={HomePage} /&gt;
      &lt;Route location={location} path=&quot;/GameInit&quot; exact component={GameInit} /&gt;
      &lt;Route location={location} path=&quot;/Battle&quot; exact component={Battle} /&gt;
    &lt;/Container&gt;
  );
  
  App.propTypes = {
    location: PropTypes.shape({
      pathname: PropTypes.string.isRequired
    }).isRequired
  };
  
  export default App;
  </code></pre>
  <p>Here at HomePage, I have a button that links to GameInit</p>
  <pre><code>const HomePage = () =&gt; (&lt;Button color=&quot;blue&quot; as={Link} to=&quot;/GameInit&quot;&gt;START GAME&lt;/Button&gt;);
  export default HomePage;
  </code></pre>
  <p>and the GameInit Page looks like</p>
  <pre><code>class GameInit extends Component {
    componentWillMount() {
      const { createNewPlayer} = this.props;
      createNewPlayer();
    }
  /* state manipulation till it gets valid */
   palyerIsReady()=&gt;{ history.push(&quot;/Battle&quot;);}
   
  export default connect(mapStateToProps,{ createNewPlayer})(GameInit);
  </code></pre>
  <p>and finally Battle component where I first see the state but lose on refresh</p>
  <pre><code>class Battle extends Component {
    render() {return (/*some stuff*/);}}
  
  Battle.propTypes = {
    players: PropTypes.object.isRequired // eslint-disable-line
  };
  const mapStateToProps = state =&gt; ({
    players: state.players
  });
  export default connect(mapStateToProps,null)(Battle);
  </code></pre>