如何顺序触发两个Redux action，使第二个在第一个执行完成后调用

云原生阿岚

2026-10-14

问题根因

你的实现思路是正确的，必须等actionToggle对应的PUT请求完成后再调用actionGetData拉取最新数据，当前代码不生效的核心原因是：

Redux默认的dispatch是同步执行的，只有当你使用了redux-thunk、redux-saga这类支持异步action的中间件，且对应的action creator返回Promise时，dispatch()才会返回可等待的Promise对象
你当前的写法中两个dispatch是同步执行的，GET请求会在PUT请求还没落地到服务端时就发出，拿到的仍然是旧数据，自然页面不会更新

解决步骤

1. 改造`actionToggle`的异步action定义

确保你的actionToggle（以redux-thunk为例）返回Promise，示例如下：

export const actionToggle = (payload) => async (dispatch) => {
  // 直接返回请求的Promise，也可以在请求完成后先处理本地状态更新
  return await fetch('/your/toggle/api', {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(payload)
  })
}

2. 改造组件内的触发逻辑

将toggleValue改为异步函数，等待actionToggle执行完成后再触发数据拉取：

const ChildComponent = () => {
   const dispatch = useDispatch();
   const { data } = useSelector((state) => state.myData, shallowEqual);
   
   const toggleValue = async (value) => {
      const payload = { resource: !value };
      try {
        // 等待PUT请求完成
        await dispatch(actionToggle(payload));
        // 再拉取最新数据
        dispatch(actionGetData());
      } catch (err) {
        // 可补充错误提示逻辑
        console.error('切换失败', err)
      }
   }

  return (
     <div>
      ...
      <button onClick={() => toggleValue(value)}>click me</button>
     </div>
  );
}