背景
Redux 是一个非常流行的 JavaScript 应用程序状态管理工具。它被广泛用于构建 Web 应用程序和移动应用程序。Redux 允许您将应用程序的状态存储在一个单一的“store”中，并通过“action”来更新状态。
在许多 Redux 应用程序中，我们需要使用异步操作来获取服务器数据或执行其他异步操作。例如，我们可能需要从服务器获取用户数据，保存表单数据，或使用 WebSocket 进行实时消息传递。Redux 的同步架构并不理想地处理这些场景。
这就是 Redux 或 React Redux 中的异步问题。虽然 Redux 本身是同步的，但它仍然应该可以处理异步操作。在本文中，我们将解决 Redux 中的异步操作问题。
解决方案
Redux 的核心思想是将状态和行为分离。状态由“store”管理，行为由“action”管理。异步操作则由“middleware”管理。
Redux 中的“middleware”是一个函数，它可以拦截“action”和“dispatch”函数，以实现异步行为。例如，我们可以使用“redux-thunk”中间件来处理异步操作。
示例代码
让我们看看如何在 Redux 中使用“redux-thunk”来处理异步操作。以下是一个简单的用户管理应用程序的示例代码：
configureStore.js
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
------ ----------- ---- -------------
------ ------- -------- ---------------- -
------ ------------
------------
----------------------
--
-actions.js
------ ----- ---- --------
------ ----- ----------------- - --------------------
------ ----- ----------------- - --------------------
------ ----- ----------------- - --------------------
-------- ----------------- -
------ -
----- -----------------
--
-
-------- ---------------------- -
------ -
----- ------------------
-------- -----
--
-
-------- ---------------------- -
------ -
----- ------------------
-------- -----
--
-
------ -------- ---------- -
------ ------------------ -
----------------------------
-----------------------
-------------- -- -
-----------------------------------------
--
------------ -- -
---------------------------------
---
--
-reducers.js
------ - --------------- - ---- --------
------ -
------------------
------------------
-----------------
- ---- ------------
-------- ----------- - -
----------- ------
------ --
-- ------- -
------ ------------- -
---- ------------------
------ -
---------
----------- ----
--
---- ------------------
------ -
---------
----------- ------
------ --------------
--
---- ------------------
------ -
---------
----------- ------
------ --------------
--
--------
------ ------
-
-
----- ----------- - -----------------
-----
---
------ ------- ------------Users.js
------ ----- ---- --------
------ - ------- - ---- --------------
------ - -------- - ---- ------------
----- ----- ------- --------------- -
------------------- -
--------------------------------
-
-------- -
----- - ----------- ------ ----- - - -----------------
-- ------------ -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
------ -
----
--------------- -- -
--- ------------------------------
---
-----
--
-
-
-------- ---------------------- -
------ -
------ -----------
--
-
------ ------- --------------------------------index.js
------ ----- ---- --------
------ - ------ - ---- ------------
------ - -------- - ---- --------------
------ -------------- ---- -------------------
------ ----- ---- ----------
----- ----- - -----------------
-------
--------- --------------
------ --
------------
-------------------------------
--通过使用“redux-thunk”中间件，我们可以在 Redux 中轻松处理异步操作。在上面的示例中，我们使用“axios”库来实现异步请求，但您可以使用您喜欢的任何库。
结论
Redux 是一个非常流行的 JavaScript 应用程序状态管理工具。它使用同步架构来处理状态更新，但它非常灵活，可以通过“middleware”来处理异步操作。在本文中，我们介绍了如何在 Redux 中使用“redux-thunk”来处理异步操作，并提供了一个示例应用程序，可以作为您迈出下一步的起点。祝您好运！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6737fef8317fbffedf0d9a51