Redux 是一个非常流行的 JavaScript 应用程序状态管理库。它的主要目标是通过预测性状态管理来简化数据流，让应用程序更加可预测和易于调试。然而，Redux 最初并不支持异步操作，这使得某些场景下的使用变得困难。在本文中，我们将谈到使用 Redux 进行异步操作的技巧。
为什么 Redux 不支持异步操作？
Redux 的理念是将应用程序中的所有状态和状态变化都汇聚在一个单一的位置，称为“store”。所有应用程序的状态都将被捆绑在 store 中，这是 Redux 的核心概念。
然而，异步操作可能会打破 Redux 的单一状态原则。如果我们允许异步操作直接改变 store 中的状态，那么我们将失去面向状态预测性的优势，而且可能会使应用程序的状态不受控制。因此，Redux 不直接支持异步操作。
如何进行异步操作？
Redux 的官方文档提供了一个 thunk 中间件，它是一个函数，可以将某些操作（如异步调用）分离到 Redux 状态管理外部。我们可以创建一个 action creator 函数，该函数返回一个函数而不是返回一个对象。这个函数可以被 Redux thunk 中间件拦截并处理。
这种方法的基本思想是将异步操作移到 action creator 函数之外，然后在操作完成后再触发状态变更的 action。这样，我们就可以保持 Redux 的单一状态原则，同时利用 thunk 中间件来处理异步操作。
示例代码
以下示例代码演示了如何使用 thunk 中间件进行异步操作：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ ----- ---- --------
-- ------- ------ -------
------ ----- --------- - -------- -- -
------ ---------- -- -
-- ----------- ------
---------- ----- -------------------- ---
-- ------
--------------------------------------------------------------------------------- -- -
-- ------------------ ------
---------- ----- --------------------- -------- ------------- ---
---------------- -- -
-- -------------------- ------
---------- ----- --------------------- -------- ----- ---
---
--
--
----- ------------ - -
----- -
----------- ------
----- -----
------ ----
-
--
----- ----------- - ------ - ------------------ ------- -- -
------ ------------- -
---- ---------------------
------ - --------- ----------- ---- --
---- ---------------------
------ - --------- ----- --------------- ----------- ----- --
---- ---------------------
------ - --------- ------ --------------- ----------- ----- --
--------
------ ------
-
--
-- -- ----- -----
----- ----- - ------------------------ ------------------------
-- ------
-----------------------------上述代码首先定义了一个 action creator 函数 fetchUser，它根据指定的 userId 执行一个 HTTP GET 请求，并根据请求结果分别发送三个不同的 action。这三个 action 分别表示开始请求、请求成功和请求失败。
然后，我们使用 createStore 函数和 userReducer 来创建一个 Redux store，并将 thunk 中间件应用于 store。最后，我们通过调用 store.dispatch 函数来触发异步操作。
结论
使用 Redux 进行异步操作可能需要一些额外的工作，但我们可以通过使用 thunk 中间件来将异步操作与 Redux 状态管理分离。这使得我们可以保持 Redux 的单一状态原则，并且更好地管理应用程序的状态。在开发复杂的前端应用程序时，了解如何使用 Redux 进行异步操作是非常重要的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6732e2c00bc820c5823f5a1f