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

Question

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

我正在学习 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...
由于订单，我如何才能正确完成？也许我应该 return 第一个承诺并在成功解决后执行第二个承诺？它看起来像这样：

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 }));
  })
}

好不好？

Answer 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 以表达完整的交易。

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

Proper way to call two async action

javascript

action

reactjs

redux

redux-thunk