如何分派两个异步redux动作?

时间:2020-04-05 07:33:24

标签: reactjs redux redux-thunk

在我的componentDidMount中,我正在分派两个动作创建者,即两个都一个接一个地被调用的thunk。在第一次调度的api调用中获取的结果将用作第二次调度的api调用中的参数。我如何做到这一点,以便我的第二个调度调用始终从第一个api调用获取更新的结果值。另外,我不能在第一个动作创建者内部调用第二个调度,因为它们都需要分开才能重用。如果已经问过这个问题,我很抱歉,我只是在寻找适用于我的用例的完美解决方案。

componentDidMount() {
  const { setLeadTypesAsync ,setRadarLeadsAsync } = this.props;
  setLeadTypesAsync(); //first dispatch
  setRadarLeadsAsync();  //second dispatch
}

//First dispatch call
export const setLeadTypesAsync = () => {
 return (dispatch) => {
 dispatch(setLeadTypesStart());
 fetchLeadTypes()  //Api service
  .then(({ data: { message, types } }) => {
    if(types) {
      dispatch(setLeadTypesSuccess(types)); //Setting a state called leadTypes
    }
    else {
      dispatch(setLeadTypesError(message));
    }
 })
}};

//Second dispatch call
export const setRadarLeadsAsync = () => {
 return (dispatch, getState) => {
 dispatch(setRadarLeadsStart());
 const { leadTypes } = getState().leads
 console.log(leadTypes);    //Getting the initial value [] instead of updated value
 fetchRadarLeads(leadTypes).then(data => {   //Api service
   console.log(data)
 })
}};

1 个答案:

答案 0 :(得分:0)

这正是async/await发挥作用的一种情况。 像这样。

async componentDidMount() {
  const { setLeadTypesAsync ,setRadarLeadsAsync } = this.props;
  const res = await setLeadTypesAsync(); //first dispatch
  setRadarLeadsAsync(res);  //second dispatch
}