Redux 是一个 JavaScript 应用程序的状态容器，它可以管理整个应用程序的状态并进行状态的流动。在前端开发中，Redux 经常用于管理数据流，特别是在处理异步请求时。
本文将介绍如何在 Redux 中定义和发起多个异步请求，包括如何处理异步请求的状态和错误，并提供示例代码和指导意义。
Redux 异步请求的定义
在 Redux 中，异步请求通常是通过中间件来处理的。Redux 提供了多个中间件来处理异步请求，其中最常用的是 redux-thunk 中间件。
redux-thunk 中间件允许我们将函数作为 action creator 返回值，这些函数可以在调用 dispatch 之前执行异步操作。这使得我们可以在 Redux 中处理异步操作，并在异步操作完成后更新应用程序状态。
定义多个异步请求
在 Redux 中，我们可以定义多个异步请求，每个请求都有自己的 action creator 和 reducer。在定义异步请求时，我们需要考虑以下几个方面：
请求的状态：请求可以有多种状态，例如正在加载、加载成功或加载失败。我们需要在 reducer 中定义这些状态，并根据状态更新应用程序状态。
错误处理：当请求失败时，我们需要捕获错误并在应用程序中显示错误消息。我们可以在 reducer 中定义错误状态，并在错误发生时更新应用程序状态。
异步请求的处理：我们需要在 action creator 中定义异步请求的处理逻辑，并在请求完成后调用
dispatch更新应用程序状态。
下面是一个示例，它定义了两个异步请求：一个用于获取用户信息，另一个用于获取用户的订单信息。
-- -------------------- ---- -------
-- ----------
------ ----- ------------------ - ---------------------
------ ----- ------------------ - ---------------------
------ ----- ------------------ - ---------------------
------ ----- -------------------- - -----------------------
------ ----- -------------------- - -----------------------
------ ----- -------------------- - -----------------------
------ ----- ---------------- - -- -- --
----- -------------------
---
------ ----- ---------------- - ------ -- --
----- -------------------
-------- -----
---
------ ----- ---------------- - ------- -- --
----- -------------------
-------- ------
---
------ ----- ------------------ - -- -- --
----- ---------------------
---
------ ----- ------------------ - -------- -- --
----- ---------------------
-------- -------
---
------ ----- ------------------ - ------- -- --
----- ---------------------
-------- ------
---
------ ----- --------- - -- -- -
------ ---------- -- -
-----------------------------
------------------
---------------- -- ----------------
------------ -- -
---------------------------------
--
-------------- -- -
------------------------------------------
---
--
--
------ ----- ----------- - -- -- -
------ ---------- -- -
-------------------------------
--------------------
---------------- -- ----------------
------------ -- -
-----------------------------------
--
-------------- -- -
--------------------------------------------
---
--
--在上面的示例中，我们定义了四个 action creator：fetchUserRequest、fetchUserSuccess、fetchUserFailure 和 fetchOrdersRequest、fetchOrdersSuccess、fetchOrdersFailure。这些 action creator 用于定义异步请求的状态和错误处理。
我们还定义了两个异步请求函数：fetchUser 和 fetchOrders。这些函数使用 fetch API 发起异步请求，并在请求完成后调用相应的 action creator 更新应用程序状态。
处理多个异步请求的状态和错误
在 Redux 中，我们需要在 reducer 中定义异步请求的状态和错误处理。下面是一个示例 reducer，它处理上面定义的两个异步请求：
-- -------------------- ---- -------
-- -----------
------ -
-------------------
-------------------
-------------------
---------------------
---------------------
---------------------
- ---- ------------
----- ------------ - -
----- -----
------- ---
------------ ------
-------------- ------
------ -----
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- -------------------
------ -
---------
------------ -----
--
---- -------------------
------ -
---------
----- ---------------
------------ ------
--
---- -------------------
------ -
---------
------ ---------------
------------ ------
--
---- ---------------------
------ -
---------
-------------- -----
--
---- ---------------------
------ -
---------
------- ---------------
-------------- ------
--
---- ---------------------
------ -
---------
------ ---------------
-------------- ------
--
--------
------ ------
-
--
------ ------- --------在上面的示例中，我们定义了一个初始状态，其中包括用户信息、订单信息、请求状态和错误信息。
我们还定义了一个 reducer，它根据 action 的类型更新应用程序状态。例如，当接收到 FETCH_USER_REQUEST action 时，我们将 userLoading 设置为 true，表示正在加载用户信息。当接收到 FETCH_USER_SUCCESS action 时，我们将 user 设置为 action 的 payload，并将 userLoading 设置为 false，表示用户信息已加载成功。当接收到 FETCH_USER_FAILURE action 时，我们将 error 设置为 action 的 payload，并将 userLoading 设置为 false，表示用户信息加载失败。
我们在 reducer 中处理订单信息的方式与处理用户信息类似。
发起多个异步请求
在 Redux 中，我们可以使用 dispatch 函数来发起异步请求。例如，我们可以在组件中使用 useEffect 钩子来发起异步请求，并使用 useSelector 钩子从 Redux 中获取应用程序状态。
下面是一个示例组件，它使用上面定义的异步请求和 reducer：
-- -------------------- ---- -------
-- ------
------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ---------- ----------- - ---- ------------
----- --- - -- -- -
----- -------- - --------------
----- ---- - ------------------- -- ------------
----- ------ - ------------------- -- --------------
----- ----------- - ------------------- -- -------------------
----- ------------- - ------------------- -- ---------------------
----- ----- - ------------------- -- -------------
------------ -- -
----------------------
------------------------
-- ------------
-- ------- -
------ ----------- --------------
-
-- ------------ -- -------------- -
------ ----------------------
-
------ -
-----
-------- -----------------
------------------
-------------------
-------- ------------
----
------------------- -- -
--- --------------------------------
---
-----
------
--
--
------ ------- ----在上面的示例中，我们使用 useEffect 钩子来发起异步请求。当组件挂载时，我们使用 dispatch 函数发起两个异步请求：fetchUser 和 fetchOrders。我们还使用 useSelector 钩子从 Redux 中获取应用程序状态，包括用户信息、订单信息、请求状态和错误信息。
当发生错误时，我们显示错误消息。当请求正在加载时，我们显示“Loading...”消息。当请求完成时，我们显示用户信息和订单信息。
总结
在本文中，我们介绍了如何在 Redux 中定义和发起多个异步请求。我们还讨论了如何处理异步请求的状态和错误，并提供了示例代码和指导意义。
在实际开发中，我们经常需要管理多个异步请求，这些请求可能涉及多个 API 和服务。通过使用 Redux，我们可以轻松地管理这些异步请求，并在请求完成后更新应用程序状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66010ab3d10417a222c33640