调用两个异步操作的正确方法

Posted 2023-02-22

【中文标题】调用两个异步操作的正确方法

【英文标题】：Proper way to call two async action

【发布时间】：2018-09-16 17:17:51

【问题描述】：

如何在另一个动作成功调度后调用异步动作？

我正在学习 Redux，我有一些关于异步操作的问题。（我正在使用 thunk） 我有两个动作：

export const addToCart = addToCartData => dispatch => 
  axios.post("/api/cart/add-to-cart", addToCartData)
    .then(res => 
      dispatch( type: ADD_TO_CART, payload: res.data );
    )
    .catch(err => console.log(err));
;

export const removeProduct = (userID) => dispatch => 
  axios
    .delete(`/api/wait-list/remove/$userID`)
    .then(res => 
      dispatch( type: REMOVE_FROM_WAITLIST, payload: res.data );
    )
    .catch(err => console.log(err));
;

而我想在addToCart 成功执行后才执行removeProduct 动作！我正在尝试用其中两个做第三个，它看起来像这样：

export const addToCartAndPemoveProduct = (data) => dispatch => 
  dispatch(addToCart(data)
  dispatch(removeProduct(data));

但它首先执行removeProduct 操作，然后执行addToCart.... 由于订单，我怎样才能做到正确？也许我应该从第一个承诺返回一个承诺并在成功解决后执行第二个承诺？它看起来像这样：

export const addToCart = addToCartData => dispatch => 
  return axios.post("/some", addToCartData)
    .then(res =>  dispatch( type: ADD.....)
;


export const addToCartAndPemoveProduct = (data) => dispatch => 
  dispatch(addToCart( userID, productId ))
  .then(data => 
     dispatch(removeProduct( userID, productName, productDescr ));
  )

可以吗？

【问题讨论】：

当然，返回 Promise 以链接异步操作是 redux-thunk 的一个非常常见的用例

@HunterMcMillen 感谢您的回复，直到此刻我还不确定是否会兑现承诺，但现在绝对确定了。

这里是菜鸟。可以按照建议链接承诺，但我想知道我们不能检查 addToCart 是否成功以及是否继续，如果没有在异步函数中调度失败操作？这是一个糟糕的逻辑吗？

@devserkan 也许这有帮助：medium.com/collaborne-engineering/… 或这个***.com/questions/35069212/…

感谢您的链接。我对这种情况的想法是这样的：pastebin.com/Gu8FbQD1

【参考方案1】：

您是否总是想在addToCart 之后发送removeProduct？在这种情况下：

export const addToCart = addToCartData => dispatch => 
    // You'll have to get the userId here first, probably from getState() if it's not being passed in.

  axios.post("/api/cart/add-to-cart", addToCartData)
      .then(res => 
          dispatch( type: ADD_TO_CART, payload: res.data );
          dispatch(removeProduct(userId));
      )
      .catch(err => console.log(err));
;

也许将操作重命名为moveProductFromWaitListToCart 以表达完整的交易。

【讨论】：

感谢您的回复，我不想希望总是在addToCart 之后发送removeProduct。