Redux 如何优雅的处理多个请求问题
Redux 是一个用于 JavaScript 应用程序的可预测状态容器，适用于处理复杂的前端业务逻辑，但在处理多个请求问题时，我们需要特别注意。在本文中，我们将介绍 Redux 如何优雅地处理多个请求问题，为前端开发带来便利。
- 问题背景
在前端开发中，我们经常需要向服务端发送多个请求，获取不同的数据进行展示，但在实际应用中，每个请求都有独立的状态，如请求中、请求成功、请求失败等，如果采用传统的方式处理这些状态，会使代码变得臃肿且不易维护。
- Redux 解决方案
Redux 提供了一个非常好的解决方案，它可以轻松处理多个请求状态，使代码结构更加清晰明了，易于维护。
首先，我们需要在 Redux Store 中定义多个请求状态，例如：
const initialState = {
user: { loading: false, data: null, error: null },
contacts: { loading: false, data: null, error: null },
messages: { loading: false, data: null, error: null }
};上述代码定义了三个请求状态，分别为用户数据、联系人数据和消息数据，每个状态都包含了 loading、data 和 error 三个属性，分别用于表示请求状态、请求成功后的数据和请求失败后的错误信息。
接下来，我们需要为每个请求定义 action 和 reducer，例如：
-- -------------------- ---- -------
----- --------- - ------------
----- ----------------- - --------------------
----- ----------------- - --------------------
------ ----- -------- - -- -- -- ----- --------- ---
------ ----- --------------- - ------ -- -- ----- ------------------ ---- ---
------ ----- --------------- - ------- -- -- ----- ------------------ ----- ---
------ ----- ----------- - ------ - ------------------ ------- -- -
------ ------------- -
---- ----------
------ - --------- -------- ----- ------ ---- --
---- ------------------
------ - --------- -------- ------ ----- ----------- --
---- ------------------
------ - --------- -------- ------ ------ ------------ --
--------
------ ------
-
--上述代码定义了用户数据的 action 和 reducer，从 LOAD_USER 开始，分别对应请求中、请求成功和请求失败的状态，其中 action 的 type 包括了三种状态，分别为 LOAD_USER、LOAD_USER_SUCCESS 和 LOAD_USER_FAILURE，对应请求的不同状态，同时根据 type 执行相应的操作，返回新的 state。
类似地，我们可以为其他请求数据定义相应的 action 和 reducer，并将它们与 Store 中的状态进行关联，如下所示：
const rootReducer = combineReducers({
user: userReducer,
contacts: contactsReducer,
messages: messagesReducer
});
const store = createStore(rootReducer);在上述代码中，我们将 userReducer、contactsReducer 和 messagesReducer 合并为 rootReducer，然后使用 createStore 创建一个 Store，并将 rootReducer 传入 createStore 中。
现在，我们已经成功地将多个请求状态纳入到 Redux Store 中，并使用 action 和 reducer 定义了不同的请求状态，使代码结构更加清晰明了，易于维护。
- 示例代码
下面是一个完整的示例代码，它包括两个请求：用户数据和联系人数据。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------- ---------------- --------------- - ---- -------------------------
------ - ------------- -------------------- ------------------- - ---- -----------------------------
----- --- - -- ----- --------- --------- ------------ -- -- -
------------ -- -
-----------
---------------
-- ---------- ---------------
-- ------------- -- ----------------- -
------ ----------------------
-
-- ----------- -- --------------- -
------ ------------------
-
------ -
-----
--------------
------------------------------- ----- ---------
------------------
----------------------------------- ----- ---------
------
--
--
----- --------------- - ------- -- --
----- -----------
--------- --------------
---
----- ------------------ - -
---------
----------------
----------------
-------------
--------------------
-------------------
--
------ ------- ------------------------ -------------------------在上述代码中，我们首先定义了 App 组件，并通过 connect 将组件与 Redux Store 的状态和 action 进行关联。在 useEffect 中分别调用了 loadUser 和 loadContacts，触发了两个请求。然后根据 loading 和 error 状态，分别返回 Loading 或 Error，以及渲染请求成功后的数据。
接下来是 userActions 和 contactsActions 的定义。
userActions.js
-- -------------------- ---- -------
----- --------- - ------------
----- ----------------- - --------------------
----- ----------------- - --------------------
------ ----- -------- - -- -- -- ----- --------- ---
------ ----- --------------- - ------ -- -- ----- ------------------ ---- ---
------ ----- --------------- - ------- -- -- ----- ------------------ ----- ---
------ ----- --------- - -- -- ----- ---------- -- -
---------------------
--- -
----- -------- - ----- -------------------
----- ---- - ----- ----------------
--------------------------------
- ----- ------- -
---------------------------------
-
--contactsActions.js
-- -------------------- ---- -------
----- ------------- - ----------------
----- --------------------- - ------------------------
----- --------------------- - ------------------------
------ ----- ------------ - -- -- -- ----- ------------- ---
------ ----- ------------------- - ------ -- -- ----- ---------------------- ---- ---
------ ----- ------------------- - ------- -- -- ----- ---------------------- ----- ---
------ ----- ------------- - -- -- ----- ---------- -- -
-------------------------
--- -
----- -------- - ----- -----------------------
----- ---- - ----- ----------------
------------------------------------
- ----- ------- -
-------------------------------------
-
--在上述代码中，我们首先定义了 LOAD_USER、LOAD_USER_SUCCESS 和 LOAD_USER_FAILURE 三种状态，分别对应请求中、请求成功和请求失败的状态，然后定义了 loadUser、loadUserSuccess 和 loadUserFailure 三个 action，分别触发不同的状态。类似地，我们为联系人数据定义了 LOAD_CONTACTS、LOAD_CONTACTS_SUCCESS 和 LOAD_CONTACTS_FAILURE 三种状态，并分别定义了 loadContacts、loadContactsSuccess 和 loadContactsFailure 三个 action，通过 fetch 方法获取请求数据，并触发相应的 action。
- 总结
在本文中，我们介绍了 Redux 如何优雅地处理多个请求问题，通过 action 和 reducer 定义了不同的请求状态，将多个请求状态纳入到 Redux Store 中，使代码结构更加清晰明了，易于维护。同时，我们展示了完整的示例代码，用于帮助开发者理解 Redux 处理多个请求状态的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6461dfc5968c7c53b0335ca5