title: How to call a method of component after successful async function in react-redux?
body: <p>Main component : </p>
  
  <pre><code>class GettingStarted extends React.Component {
  
    state = {
      incompleteStage: ['a', 'b', 'c']
    };
  
  
    next = () =&gt; {
      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 (
        &lt;div&gt;
         &lt;Child {...props}/&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; ({
    postStageLoading: state.auth.postStageLoading,
    postStageError: state.auth.postStageError
  });
  
  const mapDispatchToProps = (dispatch) =&gt; bindActionCreators({}, dispatch);
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(GettingStarted);
  </code></pre>
  
  <p>Child component: </p>
  
  <pre><code>class Child extends React.Component {
    handleSubmit = event =&gt; {
      event &amp;&amp; event.preventDefault();
      const { postStage } = this.props;
      const { next, name, nextStage } = this.props;
      postStage(name, nextStage);   // async call
      next();
    }
  
    render() {
      const { me } = this.props;
  
      return (
        &lt;div &gt;
          &lt;Typography
            Welcome {me ? me.nameOrEmail : ''}!
          &lt;/Typography&gt;
        &lt;/div&gt; 
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; ({
  
  });
  
  const mapDispatchToProps = (dispatch) =&gt; bindActionCreators({
    postStage
  }, dispatch);
  
  export default withStyles(styles)(connect(
    mapStateToProps,
    mapDispatchToProps
  )(Child));
  </code></pre>
  
  <p>modules/index.js ( since it's too long I have written only important )</p>
  
  <pre><code>export default (state = initialState, {type, payload}) =&gt; {
      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) =&gt; {
    return dispatch =&gt; {
      request.post('/stage', {stage: currentStage}, dispatch)
      .then(({ data }) =&gt; {
        if (data.success) {
          dispatch({
            type: types.POST_STAGE_SUCCESS,
          });
          dispatch(push(nextStage));
      }
   }
  };
  </code></pre>
  
  <p>So if you can see in <code>Child</code>  <strong>I have to call the <code>next()</code>  method(of main component)only after the successful call of post request.</strong>  <code>next()</code> . (I have skipped few code coz it's too lengthy). If I called just after the <code>postStage</code> (Like I did in Child), I don't have any guarantee that the api call is successful. Where and how can I call this?</p>
  
  <p>I have a button in Child which has an eventHandler - <code>handleSubmit</code> </p>