Cacher is the code snippet organizer for pro developers

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)}); //<--- I can't use this
    this.setState({selectedThemeOption: this.getCurrentTheme(event.target.value)}); //<--- 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 && layouts.toJS) {
      layoutJS = layouts.toJS();
    }

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

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);
}