Javascript Redux中间件异步函数

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

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

到目前为止，我有：

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

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

---

谢谢你

你有没有考虑过调查Redux传奇

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

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

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

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

---

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

在redux thunks中，您可以将动作调度与等待链接起来，并利用调度的返回

关于如何使用本文中的redux thunks链接操作的示例：

const dispatchChaining=（）=>async（dispatch）=>{
等待承诺([
分派（loadPosts（）），//取消订阅（））；

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

---

在内部，在解决问题后，您不会真正执行任何不同的“感谢下一步”调用，因此我不明白它为什么不起作用我们有多个这样的异步中间件功能，最近开始出现意外行为。我们看到redux选择器被旧的状态触发，可能是因为异步中间件函数影响了操作的处理顺序。嘿，Bjorn，你对为什么会发生这种奇怪行为的解释是正确的。但是，我们已经在使用redux thunk进行异步操作。问题是，我们在这里不尝试调度异步操作，而是尝试创建异步中间件，这可能会延迟异步操作的执行f动作。这有意义吗？@Hey Tom！更新了答案，提供了使用redux thunks的可能解决方案。：）谢谢Bjorn。这解释了如何创建链接其他异步动作的新动作，但问题是我们正在尝试创建异步中间件。我们的用例是一个中间件，它确保我们在运行任何redux动作之前都经过身份验证需要身份验证的ons。如果我们没有经过身份验证，所有redux操作都应该停止，直到我们通过身份验证，然后操作应该像往常一样恢复。我们正在尝试使用异步中间件函数（而不是操作）来实现此操作停止@Tom我可能听起来很蹩脚，但你能解释一下“用旧的状态片段触发重复选择器”的含义吗？因为选择器只有在状态树的相关部分发生变化时才会触发，而状态树是唯一的真理来源。@deepanshu这不是比约恩说的吗“您的代码是有效的javascript，但由于函数的异步性质，您可能会在状态中遇到不一致。如果在调度下一个操作之前您的异步操作尚未完成，则第二个操作将使用状态的版本，该版本在运行时可能会被第一个操作更改。”？

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());