title: Redux mapStateToProps() doesn't render after returning with Next.js
body: <p>I've been struggling to figure out why <code>render()</code> doesn't get called after <code>mapStateToProps()</code>.</p>
  
  <p>Currently, the working order is</p>
  
  <blockquote>
    <p><code>getInitialProps</code> -> <code>mapStateToProps</code> -> <code>mapDispatchToProps</code> -> <code>constructor</code> -> <code>render</code> -> <code>componentDidMount(here dispatch with Redux)</code> -> <code>mapStateToProps</code> -> End</p>
  </blockquote>
  
  <p>Like you see the order, render() is supposed be called after dispatch happens so that the pages is rendered with the dispatched data from Redux.</p>
  
  <p>Does anyone know why?</p>
  
  <p><strong>pages/search/index.js</strong></p>
  
  <pre><code>import { connect } from "react-redux";
  import Container from "./container";
  import { actionCreators as storeActions } from "lib/modules/stores";
  
  const mapStateToProps = (state, ownProps) =&gt; {
    const { storeList } = state;
    return { storeList };
  };
  const mapDispatchToProps = (dispatch, ownProps) =&gt; {
    const { searchTerm } = ownProps;
    return {
      searchByTerm: pageNum =&gt; {
        dispatch(storeActions.searchByTerm(searchTerm, pageNum));
      }
    };
  };
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(Container);
  </code></pre>
  
  <p><strong>pages/search/container.js</strong></p>
  
  <pre><code>import Search from "./presenter";
  
  class Index extends React.Component {
    static async getInitialProps(context) {
      const { searchTerm } = context.query;
      return {
        searchTerm
      };
    }
  
    state = {
      loading: true,
      offset: 0,
      page: 1,
      limit: 10,
      nlabel: "&gt;&gt;",
      plabel: "&lt;&lt;"
    };
  
    constructor(props) {
      super(props);
      this.handleClick = this.handleClick.bind(this);
    }
  
    componentDidMount() {
      const { searchByTerm } = this.props;
      const { page } = this.state;
      searchByTerm(page);
    }
  
    render() {
      const { classes, storeList, goToSearch, searchTerm } = this.props;
  
      return (
        &lt;Search
          {...this.state}
          storeList={storeList}
          searchTerm={searchTerm}
        /&gt;
      );
    }
  }
  
  export default Index;
  </code></pre>