reactjs - 使用 redux thunk 的 action creator 和普通的 async function 之间的区别

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

所以我想了解 Redux thunk 的基础知识,我制作了两个 action creator,其中一个可以工作并使用 redux thunk,另一个只使用异步但会中断。下面是屏幕截图:

screenshot

因此,在两个 Action 创建者中,我都等待 API 请求完成,然后返回一个 Action (一个具有类型和负载的 JS 对象)。

但是只有顶部的有效,底部的给出了一个错误,说 Action 必须是普通对象,尽管我返回了一个具有 2 个属性的普通对象。我一直在努力理解为什么第二个 Action 创建者会刹车,如果有人能详细解释为什么会这样,那就太好了。谢谢!

最佳答案

这是因为,当你使用 thunk 时,你返回的不是一个对象就是一个函数。在第二种情况下,当您像这样 dispatch(fetchUser()) 调度您的操作时,它没有返回任何东西,因为您正在调用异步方法。现在 await 下面的代码只会在 async all 完成后执行,原来 dispatch(fetchUser()) 的调用已经完成(提示:只有 await 下面的代码没有执行,但是函数调用已经完成over), fetchUser() 没有返回任何对象,但在第一种情况下,您实际上返回了一个调用异步方法的函数。这就是 thunk 中间件的魔力真正发生的地方。它执行该函数并分派(dispatch)一个由 thunk 执行的 Action (提示:您正在返回一个将分派(dispatch)作为参数的函数)。希望这能消除您的疑虑。我建议您阅读 async/await 的真正工作原理(提示:事件循环/单线程)。

关于reactjs - 使用 redux thunk 的 action creator 和普通的 async function 之间的区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54709814/

相关文章:

Redux - 服务连接等副作用的时间旅行

javascript - redux reduce Action 和 reducer 的样板

reactjs - 如何将 Babel 插件添加到 create-react-app 项目?

c# - 在 akka.net actor 中使用 async/await 是否安全

javascript - 在 useEffect 中响应异步数据获取

javascript - 有什么方法可以用 Promise.all 打破 promise 数组的并行执行

reactjs - 在 ANTD React 中使用全选选项进行多选

javascript - 如何正确处理选择下拉列表

reactjs - 使用 react 路由器渲染错误的组件

reactjs - react native 样式表属性和选项列表