react/redux:Get the latest props value from state after updating props with dispatch right away
<p>I encounter synchronous props that is mapped from state after updating props with dispatch issue . </p>

<p>In JSX, when I change select dropdown, then trigger <code>handleChange</code> method. In <code>handleChange</code>, it execute <code>selectLayoutAction</code> action, dispatch the action, update <code>selectLayout</code> property of state, after that I need to use the updated <code>selectLayout</code> property in next line for updating component state, but I can't get the new <code>selectLayout</code> value, I will get the old selectLayout...How I get the newest selectLayout value which was updated by dispatch action?</p>

<p><a href="https://gist.github.com/sevenLee/7d229a9e5d8e82b1d5e12040f3ae2ee8" rel="nofollow">https://gist.github.com/sevenLee/7d229a9e5d8e82b1d5e12040f3ae2ee8</a></p>

<pre><code>handleChange(event) {
    event.preventDefault();
    this.props.selectLayoutAction(event.target.value); // update select layout

    this.setState({selectedLayoutOption: event.target.value});

    // I need the newest selectLayout value immediately, but when I only got the old selectLayout value
    // For example: select from layout1 to layout2, I can not get layout2, I got layout1
    this.setState({selectedThemeOption: this.getCurrentTheme(this.props.selectLayout)}); //&lt;--- I can't use this
    this.setState({selectedThemeOption: this.getCurrentTheme(event.target.value)}); //&lt;--- Finally, I replace with  'event.target.value'  for getting the latest value after selectting

    this.props.resetStyles();
 }

render() {
    const { layouts, selectLayout } = this.props;
    let layoutJS = [];

    if (layouts &amp;&amp; layouts.toJS) {
      layoutJS = layouts.toJS();
    }

    return (
      &lt;div&gt;
        &lt;select onChange={this.handleChange.bind(this)} value={this.state.selectedLayoutOption}&gt;
          {this.renderOptions(layoutJS)}
        &lt;/select&gt;
      &lt;/div&gt;
    );
  }

function mapStateToProps(state) {
  console.log('Update selectLayout!!! ', state.selectLayout);   
  //When I dispatch action, I can get update selectLayout value right away here, but it can't map the state to props right away.
  return {
    layouts: state.layouts,
    selectLayout: state.selectLayout
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ selectLayoutAction, setLayoutThemeAction, resetStyles }, dispatch);
}
</code></pre>