React组件中Redux Action派发问题：两种写法差异原因求解

问题场景 #

在React组件中使用Redux时，连续派发两个Action未达到预期效果，改用Promise链式调用后问题解决。

原无效代码 #

const onClickBtn = () => {
  dispatch(addProductStockAndPrices({
    productId: itemId,
    stockData,
  }));
  dispatch(getProductById(itemId));
}

修复后有效代码 #

const onClickBtn = () => {
  dispatch(addProductStockAndPrices({
    productId: itemId,
    stockData,
  }))
    .finally(() => {
      console.log("finished addProductStockAndPrices");
      dispatch(getProductById(itemId));
    });
}

使用技术栈：React、Zod、React-Hook-Form、Redux-Toolkit

核心原因 #

问题的关键在于Redux-Toolkit中通过createAsyncThunk创建的异步Action，其dispatch调用会返回一个Promise，而同步Action的dispatch仅返回Action对象本身。

• 你的addProductStockAndPrices应该是异步Action，内部包含了后端请求这类异步操作。第一种写法里，两个dispatch是同步执行的：第一个dispatch刚触发异步流程，还没等后端响应、Redux状态完成更新，第二个getProductById就已经执行，此时获取到的是更新前的旧数据，所以不符合预期。
• 第二种写法利用了异步Action返回Promise的特性，通过.finally()确保只有在addProductStockAndPrices的整个异步流程（包括状态更新）完成后，才执行getProductById的dispatch，这时拿到的就是最新的产品数据，因此达到了预期效果。

补充：如果是纯同步Action，连续dispatch完全没问题，因为同步Action会立即更新状态。但只要涉及异步操作的Action，就必须等待其异步流程结束后，再执行依赖其状态的后续操作。

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