React 组件中调度 Redux 操作的问题

Question

我在 React 组件中使用 Redux 时遇到了问题。最初，我试图发送一个动作，然后立即发送另一个动作。这是原始代码片段：

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。任何见解将不胜感激。

Answer 1

第一个示例并行调度两个异步操作。您无法控制它们的执行顺序，只能控制它们计划执行的顺序。
在第二个示例中，

finally

只会在第一次调度的承诺解决之后发生，因此您在不知不觉中（？）控制了操作的调度顺序。