How to call a method of component after successful async function in react-redux?

Question

Main component :

class GettingStarted extends React.Component {

  state = {
    incompleteStage: ['a', 'b', 'c']
  };


  next = () => {
    const data = this.state.incompleteStage;
    // Everytime when next() gets called removes the first stage 
    // from incompleteStage.
    this.setState({
      incompleteStage: [...data.slice(1)]
    });
  }

  render() {
    const { incompleteStage } = this.state;
    const { isSmallDevice, me } = this.props;
    if (incompleteStage.length === 0) return null;

    return (
      <div>
       <Child {...props}/>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  postStageLoading: state.auth.postStageLoading,
  postStageError: state.auth.postStageError
});

const mapDispatchToProps = (dispatch) => bindActionCreators({}, dispatch);

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(GettingStarted);

Child component:

class Child extends React.Component {
  handleSubmit = event => {
    event && event.preventDefault();
    const { postStage } = this.props;
    const { next, name, nextStage } = this.props;
    postStage(name, nextStage);   // async call
    next();
  }

  render() {
    const { me } = this.props;

    return (
      <div >
        <Typography
          Welcome {me ? me.nameOrEmail : ''}!
        </Typography>
      </div> 
    );
  }
}

const mapStateToProps = (state) => ({

});

const mapDispatchToProps = (dispatch) => bindActionCreators({
  postStage
}, dispatch);

export default withStyles(styles)(connect(
  mapStateToProps,
  mapDispatchToProps
)(Child));

modules/index.js ( since it's too long I have written only important )

export default (state = initialState, {type, payload}) => {
    case types.POST_STAGE_REQUEST:
      return Object.assign({}, state, {
        postStageLoading: true
      });
    case types.POST_STAGE_SUCCESS:
      return Object.assign({}, state, {
        postStageLoading: false,
      });
    case types.POST_STAGE_FAILURE:
      return Object.assign({}, state, {
        postStageLoading: false,
        postStageError: payload
      });
}
export const postStage = (currentStage) => {
  return dispatch => {
    request.post('/stage', {stage: currentStage}, dispatch)
    .then(({ data }) => {
      if (data.success) {
        dispatch({
          type: types.POST_STAGE_SUCCESS,
        });
        dispatch(push(nextStage));
    }
 }
};

So if you can see in Child I have to call the next() method(of main component)only after the successful call of post request. next() . (I have skipped few code coz it's too lengthy). If I called just after the postStage (Like I did in Child), I don't have any guarantee that the api call is successful. Where and how can I call this?

I have a button in Child which has an eventHandler - handleSubmit

Answer 1

There's probably some neat way to wrangle the async calls to do this, but frankly I'd just put the GettingStarted local state into your Redux store. Then either change the relevant state on the POST_STAGE_SUCCESS action in the reducer, or dispatch a second action and change the state with that in the reducer. This will also prevent any race conditions where the Redux state updates faster than the local component state (or vice versa), causing different effects.

Answer 2

you should store the incompleteStage on your store and let the reducers change it. Dispatch an action when the async finishes, and the reducer should change the incompleteStage array, so your component will have it's props updated.

Answer 3

you should know about promises and structuring the app accordingly.

you should be running the code like this

postStage(name, nextStage).then(() => next());