I encountered an issue while using Redux in my React component. Initially, I was trying to dispatch an action and then immediately dispatch another one afterwards. Here’s the original code snippet:

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

However, this approach didn’t work as expected. Later, I tried a different approach and it resolved the issue:

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

Can someone explain why the first approach didn’t work while the second one did? I’m using React, Zod, React Hook Form, and Redux Toolkit. Any insights would be appreciated.