Redux中如何在一个Action内调度另一个Action？

我明白你想在addUser成功后调用getAllUser刷新用户列表，但之前的尝试都没成功——这是因为你没摸透Redux Thunk的工作逻辑，让我一步步给你理顺：

问题出在哪？ #

你之前的两种尝试都有本质问题：

• 直接调用myActions.getAllUser().then(...)：getAllUser返回的是一个Thunk函数（也就是那个接收dispatch的嵌套函数），不是Promise，所以.then()根本不会触发。
• 用self=this的方式：在Redux Action中，方法的this绑定很容易丢失，导致self.getAllUser()找不到正确的函数引用。

正确实现方案 #

要在一个Thunk Action里调度另一个，核心是：通过dispatch执行目标Thunk，并且让目标Thunk返回Promise，这样就能链式处理后续逻辑。

第一步：让getAllUser返回Promise #

先修改getAllUser，让它的Thunk返回API调用的Promise链，这样我们就能在调度它之后用.then()等待它完成：

export const myActions = {
  getAllUser() {
    return (dispatch) => {
      // 返回整个Promise链，这样dispatch(getAllUser())会返回这个Promise
      return makeApiCall()
        .then((response) => {
          dispatch({ type: USER_SUCCESS, payload: response });
        })
        .catch((error) => {
          dispatch({ type: USER_FAILURE, payload: error });
          throw error; // 抛出错误，让调用方可以捕获并处理
        });
    };
  },
  // ...其他方法
};

第二步：在addUser中调度getAllUser #

现在你可以在addUser的成功回调里，通过dispatch调用getAllUser，并在它完成后调度ADD_SUCCESS：

addUser(user) {
  return (dispatch) => {
    makeApiCall(user)
      .then((response) => {
        // 调度getAllUser的Thunk，因为它返回Promise，所以可以链式then
        return dispatch(myActions.getAllUser());
      })
      .then(() => {
        // getAllUser的API请求和dispatch都完成后，再触发ADD_SUCCESS
        dispatch({ type: ADD_SUCCESS, payload: response });
      })
      .catch((error) => {
        // 统一处理错误，比如触发ADD_FAILURE
        dispatch({ type: ADD_FAILURE, payload: error });
      });
  };
}

进阶优化：抽离复用逻辑 #

如果getAllUser的逻辑需要在多个地方调用，最好把它抽成单独的函数，避免重复代码：

// 抽离复用的获取用户列表逻辑
const fetchAndDispatchUsers = (dispatch) => {
  return makeApiCall()
    .then((response) => {
      dispatch({ type: USER_SUCCESS, payload: response });
    })
    .catch((error) => {
      dispatch({ type: USER_FAILURE, payload: error });
      throw error;
    });
};

export const myActions = {
  getAllUser() {
    return (dispatch) => fetchAndDispatchUsers(dispatch);
  },
  addUser(user) {
    return (dispatch) => {
      makeApiCall(user)
        .then((response) => fetchAndDispatchUsers(dispatch))
        .then(() => dispatch({ type: ADD_SUCCESS, payload: response }))
        .catch((error) => dispatch({ type: ADD_FAILURE, payload: error }));
    };
  }
};

这样代码更简洁，后续维护也更方便。

内容的提问来源于stack exchange，提问作者JiteshW