在前端开发中，Redux 已成为状态管理的一种重要工具。Redux 和 React 配合使用可以非常方便地统一管理应用程序的状态。
React 是一个组件化的框架，其思路是将一个大型应用程序分成多个独立组件，每个组件负责自己的职责。Redux 作为统一的状态管理工具，负责管理所有组件的状态，让这些组件之间的数据交流更加便利。
Redux 中的 Action 是一种描述状态改变的消息，它们以普通 JavaScript 对象的形式出现。异步 Action 是 Redux 一种强大的实现方式，它可以帮助开发人员更好的处理复杂的数据异步操作。在 Redux 中，异步 Action 是指发起异步请求的 Action。
Redux 中的异步操作
在 Redux 中使用异步操作，通常需要以下步骤：
- 发起一个异步请求
- 发送请求时通常要改变应用程序状态
- 请求成功后更新状态
- 请求出现错误时，也需要更新应用程序状态
在 Redux 中处理异步操作有很多方法，例如使用 Redux-thunk 中间件，在 Action 中返回一个函数，在函数中进行异步请求，并发起 Action 把结果通知给 dispatch。以下是一个示例代码：
-- -------
------ ----- ---- -------
------ - ------------------- ------------------- ------------------ - ---- -------------
----- --------- - -- -- -
------ ---------- -- -
----------------------------
-----
-----------------------------------
---------------- -- -
----- ---- - -------------
--------------------------------
--
-------------- -- -
-----------------------------------------
--
-
-
----- ---------------- - -- -- -
------ -
----- ------------------
-
-
----- ---------------- - ------ -- -
------ -
----- -------------------
-------- ----
-
-
----- ---------------- - ------- -- -
------ -
----- -------------------
-------- -----
-
-上面代码中，fetchData 方法是一个 Action Creator，使用了 Redux-thunk 中间件，返回一个函数而不是一个对象，这个函数在内部进行异步操作，请求数据并使用 fetchDataRequest、fetchDataSuccess、fetchDataFailure 函数来改变应用程序的状态，分别代表数据请求中、数据请求成功和数据请求失败。
Redux 中的 async/await
ES2017 为异步编程提供了一个全新的解决方案 async/await。async/await 是对 Generator 的一个语法改进，可以让异步代码看起来像同步代码，这使得代码阅读性更强，让异步操作更加便捷。
在 Redux 中使用 async/await 简单明了，只需在 Action 函数中加入 async/await 关键字即可，以下是一个示例代码：
-- -------
------ ----- ---- -------
------ - ------------------- ------------------- ------------------ - ---- -------------
----- -------------- - -- -- -
------ ----- ---------- -- -
----------------------------
--- -
----- -------- - ----- ----------------------------------------
----- ---- - -------------
--------------------------------
- ----- ------- -
-----------------------------------------
-
-
-
----- ---------------- - -- -- -
------ -
----- ------------------
-
-
----- ---------------- - ------ -- -
------ -
----- -------------------
-------- ----
-
-
----- ---------------- - ------- -- -
------ -
----- -------------------
-------- -----
-
-上面的代码中，fetchDataAsync 函数写法与 fetchData 函数的写法类似，只是在内部使用 async/await 改写了异步操作。可以看到这次，我们使用 try-catch 语句来捕捉错误，更加清晰明了。
总结
Redux 中使用异步 Action 的方法有很多种选择，Redux-thunk 中间件和 async/await 都是非常好的选择。当然对于某些场景，也可以选择其他功能更强大的库。
本文介绍了如何在 Redux 中处理异步操作，包括使用 Redux-thunk 中间件和使用 async/await 实现异步 Action，希望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64ef83ddf6b2d6eab397c69e