如何一个接一个地调度两个异步 redux 动作？

Posted 2023-02-22

【中文标题】如何一个接一个地调度两个异步 redux 动作？

【英文标题】：How to dispatch two async redux action one after another?

【发布时间】：2020-07-17 05:56:34

【问题描述】：

在我的 componentDidMount 中，我分派了两个动作创建者，即 thunk 都一个接一个地调用。第一次 dispatch 的 api 调用中获取的结果将作为第二次 dispatch 的 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)
 )
;

【问题讨论】：

这能回答你的问题吗？ chaining async method calls - javascript

不，我不是在寻找基于承诺的解决方案

【参考方案1】：

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

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