Redux 中间件异步函数

Question

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

为了让这对我最有意义，我需要中间件函数本身是一个异步函数，以便我可以在我创建的其他异步函数上使用“await”和 try/catch 块，而不是必须使用 .然后，.catch。

到目前为止，我有这个：

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

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

谢谢

Answer 1

你考虑过研究 Redux Sagas 吗？ https://redux-saga.js.org/

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

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

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

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

---

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

在 redux thunk 中，您可以使用 await 和利用分派的返回来链接操作分派。

关于如何使用本文中的 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 可以存在于商店的不同部分，以保持关注点分离。