Redux 是一个流行的 JavaScript 应用程序状态管理库，它被广泛应用于前端领域。它提供通用的状态容器，可以让我们轻松管理应用程序的状态。在实际开发中，异步操作是非常常见的，例如从服务器获取数据、异步调用 API 等。在 Redux 中如何处理异步操作？
Redux 中的异步处理
Redux的设计理念是所有的state变更皆由纯函数reducer处理，因此Redux并没有内置异步处理能力，它只能通过 middleware 来处理异步操作。Redux官方提供了一个官方中间件——redux-thunk，redux-saga等等，其中redux-thunk是其中最简单的一个，同时它也大多数情况下能够满足我们的需求。
Redux Thunk
Thunk有好几种定义，一种最流行、最约定俗成的是它是一个能够延迟计算的表达式。具体而言，它是一个函数，用来封装一个计算任务，可以在需要时再进行计算。Redux Thunk利用到了这个特性，它提供了一种让action创建器真正做点异步操作的方式——在action创建器中返回一个函数，而不是普通action对象。
安装
使用npm安装redux-thunk：
--- ------- ------ -----------
使用
在使用 createStore 创建 Redux Store 的时候，通过 applyMiddleware 把 redux-thunk 加入到 Middleware 中。
------ - ------------ --------------- - ---- -------- ------ ----- ---- -------------- ------ ----------- ---- ------------- ----- ----- - ------------ ------------ ---------------------- --
示例
假如我们要实现一个异步增加计数器的功能，我们需要做如下的步骤：
- 定义增加计数器的 action 类型和函数
-- -- ------------ ------ ----- --------- - ------------ -- -- ---------- ------ - --------- - ---- -------------- ------ ----- -------- - -- -- -- ----- ---------- ---
- 创建 action 创建函数
在 action 创建函数中进行异步操作，最终通过 dispatch 分发 action
-- -- -----------------
------ - -------- - ---- ------------
------ ----- ------------- - -- -- -
------ -------- -- -
------------- -- -
---------------------
-- ------
--
--- 整合 action
-- ------------
------ - --------- - ---- ---------------
----- ------------ - -
------ --
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------
------ -
------ ----------- - --
--
--------
------ ------
-
--
------ ------- --------- 在组件中调用 action 创建函数
在组件中，我们通过 React-redux 提供的 connect 函数连接 Redux Store，从而可以在 props 上获取到 dispatch。然后再通过 dispatch 触发 action。
-- -- ------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------------- - ---- -------------------------
----- --- - -- ------ ------------- -- -- -
-----
---------- ------------
------- -----------------------------------------
------
--
----- --------------- - ----- -- --
------ ------------
---
------ ------- ------------------------ - ------------- --------上面的代码中，当点击按钮时，我们调用 addCountAsync 方法，该方法返回了一个函数，这个函数最终需要通过 dispatch 触发 ADD_COUNT action。
最后，我们的 app 功能正常，当点击按钮一秒后，计数器会自动 +1。
总结
本文介绍了 Redux 中的异步等待和处理方法，重点介绍了 redux-thunk 中间件的原理和使用方法。Redux 中的异步操作需要用 middleware 来处理，在中间件内写异步操作，最终通过 actionCreator 返回普通对象 action 或者函数来实现异步操作。redux-thunk 让我们可以非常方便地实现异步操作，它灵活易用、应用场景广，对于大多数前端开发者而言，它是一个不错的选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654af41b7d4982a6eb4e8f38