Question

在我的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)
 })
}};

Answer 1

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

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

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

1 个答案: