如何首先运行我的调度方法,然后停止更改redux状态,然后调用componentDidUpdate?

时间:2019-09-13 12:50:00

标签: reactjs redux

这是我的组成部分:

class PreCreate extends Component {

  handleStartBtn = e => {
    this.props.createSurvey(name);
  };

  componentDidUpdate(prevProps, prevState) {
    if (prevProps.currentSurvey !== this.props.currentSurvey) {
      const cookies = new Cookies();
      cookies.set("assignments", `EHS_${this.props.currentSurvey.uuid}`, {
        path: "/"
      });
    }
    this.props.history.push("/polling");
  }
  render() {
    return (
      <Button type="primary" onClick={this.handleStartBtn}>
              Start
            </Button>
    );
  }
}
const mapStateToProps = state => {
  return {
    currentSurvey: state.survey.currentSurvey
  };
};

const mapDispatchToProps = dispatch => {
  return {
    createSurvey: name => dispatch(createSurvey(name))
  };
};

export default withRouter(
  connect(
    mapStateToProps ,
    mapDispatchToProps
  )(PreCreate)
);


createSurvey方法是位于我的Redux动作中的调度程序,其外观如下:

export const surveySuccess = survey => {
  return {
    type: actionType.SURVEY_SUCCESS,
    currentSurvey: survey
  };
};

export const createSurvey = name => {
  return dispatch => {
    dispatch(surveyStart());
    axios({
      method: "post",
      data: {
        name: name
      },
      url: `http://127.0.0.1:8000/survey/`,
      headers: {
        "Content-Type": "application/json"
      }
    })
      .then(res => {
        const survey = res.data;
        dispatch(surveySuccess(survey));
      })
      .catch(err => {
        console.log(err);
        dispatch(surveyFail(err));
      });
  };
};

我的问题是,当handleStartBtn方法开始运行并调用createSurvey方法时,它成功进入了位于我的Redux动作中的createSurvey方法,但是与通过Axis发送我的数据有关的操作似乎会推迟到调用componentDidUpdate有完成了。在执行componentDidUpdate中的操作后,它运行服务器端操作并达到Redux状态。

0 个答案:

没有答案