时间戳

首页 > 解决方案 > React/Redux 如何等待调度的动作完成？

reactjs - React/Redux 如何等待调度的动作完成？

问题描述

在我的 thunk 中，我在一个名为的数组中有两个调度，dispatches它们修改了 Redux 存储。只有在他们两个都完成之后（即修改了 Redux 存储），我才想调度finalDispatchCall. 我尝试将它们都放在 aPromise和 calledthen中，但我仍然看到在更新 Redux 商店finalDispatchCall之前正在制作。secondDispatchCall

const dispatches = [];
dispatches.push(dispatch(firstDispatchCall());
dispatches.push(dispatch(secondDispatchCall());
Promise.all([...dispatches]).then(() => {
 dispatch(finalDispatchCall());
})
.catch(error => {
 logger.error(
  `Print out error - ${error}`
 );
});

有没有办法在调用另一个调度之前确保调度已经完成？

编辑（更多细节）：

firstDispatchCall正在进行 API 调用（返回）并在语句中fetch调度操作then以更新 redux 存储。secondDispatchCall还进行 API 调用（返回）并在其语句中fetch分派另外两个动作then，每个动作都进行自己的 API 调用并分派动作以更新 redux 存储。

我想等到所有这些都完成后再做finalDispatchCall。

标签： reactjsreduxreact-reduxredux-thunk

解决方案

只要firstDispatchCall()和secondDispatchCall()是同步的，redux 就保证它们将按顺序同步到达，并且后续调用dispatch()将作用于更新的状态。但是，如果您想绝对确定，您可以使用store.subscribe()来在程序上等待您期望的所有更改，并在每次更改时阅读存储以确认它们都在那里。DispatchCall如果 first 和 second是异步的，这实际上是必不可少的。

但是，问题是你是否真的需要从那个特定的 thunk 中知道所有调度何时到达。Redux 是一个事件总线，因此提供了许多方法来给异步猫换肤。通过等待这些调度以调度最后一个调度，这可能有助于更多地了解您试图解决的问题。可能你真的不需要这样做......

我建议阅读 Redux 团队对这个确切问题的看法：“我应该从一个动作创建者那里连续调度多个动作吗？” . 特别注意那里：

“一般来说，询问这些动作是否相关但独立，或者实际上应该表示为一个动作。”

Redux 的新手经常对可能是单个操作的操作使用多个操作，因为他们忘记了多个 reducer 都可以监听同一个操作。

推荐阅读