React-redux: Get the latest props value from state after updating props with dispatch right away

Created on 7 Jun 2016  路  2Comments  路  Source: reduxjs/react-redux

I encounter synchronous props that is mapped from state after updating props with dispatch issue.

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

https://gist.github.com/sevenLee/7d229a9e5d8e82b1d5e12040f3ae2ee8

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

Most helpful comment

Hi! This is a usage question, so it would be much better to ask on StackOverflow. This is just a bug tracker, it鈥檚 not meant to be a place for Q&A because answers would get lost here. I鈥檒l close but feel free to post a link to your StackOverflow question. Thanks!

All 2 comments

Hi! This is a usage question, so it would be much better to ask on StackOverflow. This is just a bug tracker, it鈥檚 not meant to be a place for Q&A because answers would get lost here. I鈥檒l close but feel free to post a link to your StackOverflow question. Thanks!

Sorry for that, thanks for your reminder. I already post on StackOverflow, If anybody have free time, please check it, thank you!
http://stackoverflow.com/questions/37684631/get-the-latest-props-value-from-state-after-updating-props-with-dispatch-right-a

Was this page helpful?
0 / 5 - 0 ratings