使用 redux thunk 的动作创建者和普通异步函数之间的区别答案

【问题标题】：Difference between an action creator using redux thunk and a normal async function使用 redux thunk 的动作创建者和普通异步函数之间的区别
【发布时间】：2019-07-09 15:00:59
【问题描述】：

所以我想了解 Redux thunk 的基础知识，我制作了两个动作创建器，其中一个工作并使用 redux thunk，另一个只使用异步但中断。下面是屏幕截图：

因此，在两个动作创建器中，我都等待 API 请求完成，然后返回一个动作（具有类型和有效负载的 JS 对象）。

但是只有最上面的一个有效，而下面的给出了一个错误，说动作必须是普通对象，尽管我返回了一个具有 2 个属性的普通对象。我一直在努力理解为什么第二个动作创建者会刹车，如果有人能详细解释为什么会发生这种情况，那就太好了。谢谢！

【问题讨论】：

“虽然我返回了一个具有 2 个属性的普通对象”，但你没有。异步函数返回一个承诺，该承诺被解析为您返回的任何内容。所以消息是正确的，你的动作创建者返回了一个承诺，而你没有中间件来处理它。
请在问题本身中包含所有相关代码。代码图片无法搜索，因此问题对未来的读者没有用处。
Why do we need middleware for async flow in Redux?的可能重复

标签： reactjs redux async-await react-redux redux-thunk

【解决方案1】：

你不能使用异步函数，因为它总是会返回一个 Promise。即使你返回一个值，它也会被包装在一个 Promise 中并被返回。如果您没有在异步函数中返回任何内容并尝试读取该值，则 undefined 将被包装在一个 promise 中。正如 redux 所说，动作创建者应该返回一个无法直接使用异步函数完成的普通对象。

【讨论】：

【解决方案2】：

这是因为，当您使用 thunk 时，您会返回一个对象或函数。在第二种情况下，当您发送类似 dispatch(fetchUser()) 的操作时，它没有返回任何内容，因为您正在调用异步方法。现在 await 下面的代码只有在 async all 完成后才会执行，dispatch(fetchUser()) 的原始调用已经完成（提示：只有 await 下面的代码没有执行，但函数调用已经结束），而 fetchUser() 没有返回任何对象，但在第一种情况下，您实际上返回的是一个调用异步方法的函数。这就是 thunk 中间件真正发挥作用的地方。它执行该函数并分派一个动作（提示：您正在返回一个将分派作为参数的函数），该动作由 thunk 执行。希望这可以消除您的疑问。我建议您阅读 async/await 的实际工作原理（提示：事件循环/单线程）。

【讨论】：