Redux 中间件异步函数

Question

我有一个与 rest api 交互的 redux 中间件。我最近开始使用 async/await 重写一些 fetch 函数。

为了对我来说最有意义，我需要中间件函数本身是一个异步函数，这样我就可以在我创建的其他异步函数上使用“等待”和 try/catch 块，而不是拥有使用 .then、.catch。

到目前为止，我有这个：

const apiMiddleware = ({
  dispatch,
  getState
}) => next => async action => {
  switch (action.type) {
   //...
   }
  next(action);
};

请注意在“动作”之前使用 async 关键字。到目前为止，这似乎按预期工作，我可以等待该中间件的其他异步功能。但是，由于我无法找到这方面的文档，我想知道我所做的是否真的有效。

谢谢

Answer 1

您是否考虑过研究 Redux Sagas？ https://redux-saga.js.org/

这是专门为使使用异步函数更易于管理而创建的。 而且我认为实现这一点可以使您的异步函数更易于理解，并且更易于调试。

您的代码是有效的 javascript，但由于函数的异步性质，您可能会遇到状态不一致的情况。

如果在调度下一个操作之前您的异步操作未完成，则第二个操作将使用状态的一个版本，该状态可能会在运行时被第一个操作改变。

这种行为可能会给您带来您所描述的问题。

---

编辑：在我得知你已经在使用 redux-thunks 之后

在 redux thunk 中，您可以链接动作调度、等待，并利用调度的返回。

本文中有关如何使用 redux-thunk 链接操作的示例：https://blog.jscrambler.com/async-dispatch-chaining-with-redux-thunk/

const dispatchChaining = () => async (dispatch) => {
  await Promise.all([
    dispatch(loadPosts()), // <-- async dispatch chaining in action
    dispatch(loadProfile())
  ]);

  return dispatch(updateDone());
};

const actions = redux.bindActionCreators({dispatchChaining}, store.dispatch);
actions.dispatchChaining().then(() => unsubscribe());

请注意，只要有返回，这些分派就可以执行。这里的好处是我们可以并行触发异步调度并等待两者完成。然后，更新 isDone 知道两个调用都已完成，没有任何不可预测的行为。这些可重用的 thunk 可以存在于 store 的不同部分以保持关注点分离。