title: Redux state is undefined in mapStateToProps
body: <p>I am currently following <a href="http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html" rel="noreferrer">this</a> tutorial. I've hit a bit of a snag involving <code>mapStateToProps</code> in the following code:</p>
  
  <pre><code>import React from 'react';
  import Voting from './voting';
  import {connect} from 'react-redux';
  
  const mapStateToProps = (state) =&gt; {
    return {
      pair: state.getIn(['vote','pair']),
      winner: state.get('winner')
    };
  }
  
  const VotingContainer = connect(mapStateToProps)(Voting);
  export default VotingContainer;
  </code></pre>
  
  <p>Here is the Voting component that's imported:</p>
  
  <pre><code>import React from 'react';
  import Vote from './Vote';
  import Winner from './winner';
  
  const Voting = ({pair,vote,hasVoted,winner}) =&gt;
    &lt;div&gt;
      {winner ? &lt;Winner winner={winner}/&gt;  :
        &lt;Vote pair={pair} vote={vote} hasVoted={hasVoted}/&gt;
      }
    &lt;/div&gt;
  
  export default Voting;
  </code></pre>
  
  <p>It is supposed to render two buttons from the <code>pair</code> prop. The <code>vote</code> prop is a function that will be executed on click, <code>hasVoted</code> disables buttons when true and winner only renders the winner component as shown.</p>
  
  <p>The state is expected to be an immutableJS map that looks like this:</p>
  
  <pre><code>Map({
    vote:{
      pair:List.of('Movie A','Movie B')
    }
  });
  </code></pre>
  
  <p>Instead I am getting an error saying that state is undefined in the state.getIn line.</p>
  
  <p>The code setting the state is in index:</p>
  
  <pre><code>const store = createStore(reducer);
  
  const socket = io(document.location.protocol + '//' + document.location.hostname + ':8090');
  socket.on('state', state =&gt; store.dispatch({
    type: 'SET_STATE',
    state
  }));
  </code></pre>
  
  <p>I have logged <code>store.getState()</code>after setting and it is as expected but <code>undefined</code> in <code>mapStateToProps</code>. I also logged the state variable in above context and it's also as expected.</p>
  
  <p>I also set the state normally and it surprisingly works!:</p>
  
  <pre><code>store.dispatch({
    type: 'SET_STATE',
    state: {
      vote: {
        pair: ['Movie A', 'Movie B']
      }
    }
  });
  </code></pre>
  
  <p>The value of state above is exactly what is received from the server</p>
  
  <p>Lastly here's what my reducer looks like:</p>
  
  <pre><code>import React from 'react';
  import {Map, fromJS} from 'immutable';
  
  const reducer = (state = Map(), action) =&gt; {
    switch (action.type) {
      case 'SET_STATE':
        return state.merge(action.state);
    }
  }
  
  export default reducer;
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p>EDIT: I realised that <code>mapStateToProps</code> is not being called after the <code>store.dispatch()</code>. I went through the <a href="http://redux.js.org/docs/Troubleshooting.html" rel="noreferrer">docs</a> for the possible reasons <code>mapStateToProps</code> is not being called and it's not one of them.</p>