title: react/redux:Get the latest props value from state after updating props with dispatch right away
body: <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>