11

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

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

到目前为止，我有这个：

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

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

谢谢

4

1 回答 1

5

你考虑过 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 可以存在于存储的不同部分以保持关注点分离。

于 2020-12-03T09:41:33.013 回答