Redux 中如何处理获取数据前和获取数据后的状态切换及展示
前言
在开发前端项目时，如果要对数据进行管理，Redux 是一个非常好的选择。Redux 主要是通过组件中的 dispatch 来触发 store 中的数据变化，然后通过 subscribe 来对变化进行监听并进行业务处理。在实际项目中，处理数据请求的状态切换很重要，本文就针对 Redux 中如何处理数据请求的状态来进行详细叙述。
Redux 中的请求状态
在 Redux 中，描述请求状态可以使用五种状态：请求前、请求中、请求成功、请求失败和请求清空。
请求前（pending）：在发送请求前，state 中的数据为初始化状态，也就是未开始请求状态。
请求中（loading）：在发送请求后，state 中的数据变为 loading 状态，也就是正在请求状态。
请求成功（fulfilled）：当异步请求成功后，state 中的数据变为 fulfilled 状态，也就是请求成功状态。
请求失败（rejected）：当异步请求失败后，state 中的数据变为 rejected 状态，也就是请求失败状态。
请求清空（idle）：如果需要将异步请求重置为初始化状态，可以使用 idle 状态。
通过这些状态，我们可以方便地处理异步请求的状态切换。
请求前状态
请求前状态即为初始化状态，也就是 state 中的数据在发生异步请求之前为初始状态。
我们可以在 reducer 中定义状态初始值：
const initialState = {
data: null,
status: 'idle', // 状态初始值为 idle
error: null
}请求中状态
在请求数据前，store 中的状态值会变为 loading。
-- -------------------- ---- -------
----- --------- - ----------------------------- ----- -- -- -
----- -------- - ----- ------------------
------ ----------------
---
----- --------- - -------------
----- -------
-------------
--------- ------
-------------- --------- -- -
---------------------------------- ------- -- -
------------ - ---------- -- -- ------- --
--
-
---请求成功状态
在异步函数中，如果调用请求成功则将 store 中的状态值变为 fulfilled。
-- -------------------- ---- -------
----- --------- - -------------
----- -------
-------------
--------- -----
-------------- --------- -- -
------------------------------------ ------- - ------- -- -- -
------------ - ------------ -- -- --------- --
---------- - --------
----------- - -----
--
-
---请求失败状态
在异步函数中，如果调用请求失败则将 store 中的状态值变为 rejected。
-- -------------------- ---- -------
----- --------- - -------------
----- -------
-------------
--------- ------
-------------- --------- -- -
----------------------------------- ------- - ------- -- -- -
------------ - ----------- -- -- -------- --
----------- - ----------------
--
-
---请求清空状态
如果需要将异步请求重置为初始化状态，可以使用 idle 状态。
-- -------------------- ---- -------
----- --------- - -------------
----- -------
-------------
--------- ------
-------------- --------- -- -
---------------------------------- ------- -- -
------------ - ----------
--
------------------------------------ ------- - ------- -- -- -
------------ - ------------
---------- - --------
----------- - -----
--
----------------------------------- ------- - ------- -- -- -
------------ - -----------
----------- - ----------------
--
---------------------------------- ------- -- -
------------ - ------- -- -- ---- --
---------- - -----
----------- - -----
--
-
---实例
接下来，我来展示一个实例，在这个实例中我们通过异步请求获取用户信息。
代码实现
-- -------------------- ---- -------
------ - ------------ ---------------- - ---- -------------------
------ ----- --------- - ---------------------------------- ----- -------- -- -
----- -------- - ----- ----------------------------
------ ----------------
---
----- --------- - -------------
----- -------
------------- -
----- -----
------- -------
------ ----
--
--------- ---
-------------- --------- -- -
---------------------------------- ------- -- -
------------ - ----------
---
------------------------------------ ------- - ------- -- -- -
------------ - ------------
---------- - --------
----------- - -----
---
----------------------------------- ------- - ------- -- -- -
------------ - -----------
----------- - ----------------
---
---------------------------------- ------- -- -
------------ - -------
---------- - -----
----------- - -----
---
-
---
------ ------- ------------------在组件中，我们通过 useSelector 选择需要的数据进行展示，并通过 useDispatch 发起异步请求：
-- -------------------- ---- -------
------ - --------- --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - --------- - ---- --------------
------ ------- -------- --------------- ------ -- -
----- ------- --------- - -------------
----- -------- - --------------
------------ -- -
---------------------------
------------ -- -----------------------
-- ---------- ---------
----- ---- - ------------------- -- -----------------
----- ------ - ------------------- -- -------------------
-- ------- --- ----------- -- ----- -
------ -
-----
--------------------
--------- ----------------
------
-
- ---- -- ------- --- ---------- -
------ --------------------
- ---- -- ------- --- ----------- -
------ -----------------
-
------ -----
-在实例中，通过 Redux 来管理用户信息的请求状态，针对 loading、fulfilled、rejected 状态分别进行不同的展示处理。
结论
通过本文，我们了解了 Redux 中的异步请求状态切换，以及通过处理好的请求状态来展示组件。在处理异步请求前后状态的同时，也能使代码更加规范化、易于维护。同时，也为项目的使用提供了方便性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6704e4b1d91dce0dc850a91b