score:1

Accepted answer

i put all states on redux store, don't use local state anymore, use mapstatetoprops make state as props, then get the latest value from it. it is the best practice i think:

  handlechange(event) {
    event.preventdefault();
    this.props.selectlayoutaction(event.target.value);
    this.props.resetstyles();
  }

  handlethemechange(event) {
    event.preventdefault();
    this.props.setlayoutthemeaction({
      name: this.props.selectlayout,
      currenttheme: event.target.value
    });
  }

  render() {
      const { layouts, selectlayout } = this.props;
      let layoutslist = list(layouts);
      let currenttheme = '';

      if (layouts && layouts.get) {
        let targetlayout = layouts.find((layout) => layout.get('name') === selectlayout);
        currenttheme = targetlayout.get('currenttheme');
      }

      return (
        <div>
          <select onchange={this.handlechange.bind(this)} value={selectlayout}>
            {this.renderoptions(layoutslist)}
          </select>

          <select onchange={this.handlethemechange.bind(this)} value={currenttheme}>
            {this.renderthemeoptions(selectlayout, layouts)}
          </select>
        </div>
      );
    }



function mapstatetoprops(state) {
  console.log('update selectlayout!!! ', state.selectlayout);
  syncselectlayout = state.selectlayout;
  return {
    layouts: state.layouts,
    selectlayout: state.selectlayout
  };
}

function mapdispatchtoprops(dispatch) {
  return bindactioncreators({ selectlayoutaction, setlayoutthemeaction, resetstyles }, dispatch);
}

score:4

that would assume synchronous behavior from redux. never assume anything about setstate and dispatch execution order with redux. so, what you probably want is to either do full-blown redux and put everything in redux's store, then use mapstatetoprops, or use componentwillreceiveprops to trigger your state changes. putting everything in the redux store and state, that is the preferred long-term option, more maintainable and unit-testable.


Related Query

More Query from same tag