在react-redux中成功異步函數后如何調用組件方法？

Question

主要組成部分：

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

子組件：

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（由於時間太長，我只寫了重要的東西）

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

因此，如果您可以在Child中看到，則僅在成功調用發布請求之后，才必須調用（主要組件的） next()方法。 next() 。 （我跳過了一些代碼，因為它太長了）。 如果我是在postStage之后postStage （就像我在Child中所做的那樣），則我無法保證api調用成功。 我在哪里以及如何稱呼它？

我在Child中有一個帶有eventHandler的按鈕handleSubmit

Answer 1

可能有一些巧妙的方法可以糾纏異步調用來執行此操作，但是坦率地說，我只是將GettingStarted本地狀態放入您的Redux存儲中。 然后，要么在化POST_STAGE_SUCCESS中的POST_STAGE_SUCCESS操作上更改相關狀態，要么調度第二個操作並用化POST_STAGE_SUCCESS器中的狀態更改狀態。 這也將防止Redux狀態更新速度比本地組件狀態更新快的任何競爭情況（反之亦然），從而導致不同的效果。

Answer 2

您應該將incompleteStage存儲在您的商店中，並讓減速器對其進行更改。 異步完成后調度一個動作，而reducer應該更改incompleteStage數組，以便您的組件對其props進行更新。

Answer 3

您應該了解諾言並相應地構建應用程序。

你應該像這樣運行代碼

postStage（name，nextStage）.then（（）=> next（））;