Redux state is undefined in mapStateToProps
<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>