Redux 是一种流行的 JavaScript 应用程序状态管理库，它的优势在于它可以有效地管理应用程序状态和逻辑，因此很适合前端开发。在实际应用中，我们经常需要进行异步请求，而在执行异步请求的过程中往往需要展示加载状态，这也是 Redux 应用中常见的问题。
本文将介绍如何在 Redux 中处理异步请求的 loading 状态，并提供示例代码和实际应用中的指导意义。
为什么需要处理 loading 状态？
每当我们向服务器发送异步请求时，通常会遇到一些等待响应的时间。在等待的这段时间中，我们的应用程序可能会呈现空白屏幕或空白区域，这会给用户带来不必要的烦恼和不便。
解决这个问题的方法是在数据加载时向用户展示一个加载状态。这样用户就能感受到应用程序正在进行某些操作，而不是像等待未知的超时或错误一样的焦虑。
如何在 Redux 中处理 loading 状态？
在 Redux 应用中，我们可以将加载状态视为应用程序状态的一部分，由 Redux store 统一维护。当我们执行异步请求时，我们需要在 Redux store 中触发一个 action 来表示数据正在加载，并且在异步请求结束时，再次触发一个 action 以表示数据加载完成。这个过程需要经过三个步骤：
- 触发一个 action 来表示数据正在加载。
- 发送一个异步请求以获取数据。
- 在异步请求完成时，触发另一个 action 来表示该数据已经加载完成。
Action
在 Redux 应用程序中，action 是指用于描述操作的普通 JavaScript 对象。在我们处理异步请求中的 loading 状态时，我们可以定义不同的 action 类型来表示不同的状态。
export const LOAD_DATA_BEGIN = 'LOAD_DATA_BEGIN';
export const LOAD_DATA_SUCCESS = 'LOAD_DATA_SUCCESS';
export const LOAD_DATA_FAILURE = 'LOAD_DATA_FAILURE';
export const loadDataBegin = () => ({ type: LOAD_DATA_BEGIN });
export const loadDataSuccess = (data) => ({ type: LOAD_DATA_SUCCESS, payload: { data } });
export const loadDataFailure = (error) => ({ type: LOAD_DATA_FAILURE, payload: { error } });在这段代码中，我们定义了三个 action 类型，分别是 LOAD_DATA_BEGIN、LOAD_DATA_SUCCESS 和 LOAD_DATA_FAILURE。其中 LOAD_DATA_BEGIN 表示数据开始加载，LOAD_DATA_SUCCESS 表示数据加载成功，LOAD_DATA_FAILURE 表示数据加载失败。我们还定义了三个 action creator，它们分别用于创建对应的 action 对象。
Reducer
在 Redux 应用程序中，reducer 是一个纯函数，用于描述数据状态的变化。在处理加载状态时，我们可以在 reducer 中处理相应的 action 并更新状态。
-- -------------------- ---- -------
----- ------------ - -
----- -----
-------- ------
------ -----
--
------ ----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------------
------ - --------- -------- ---- --
---- ------------------
------ - --------- -------- ------ ----- ------------------- --
---- ------------------
------ - --------- -------- ------ ------ -------------------- --
--------
------ ------
-
--在这段代码中，我们定义了一个初始状态，并在 reducer 中处理不同的 action。当 action 类型为 LOAD_DATA_BEGIN 时，我们将 loading 属性设置为 true，表示正在加载数据。当 action 类型为 LOAD_DATA_SUCCESS 时，我们将 loading 属性设置为 false，表示数据加载完成并成功得到响应，同时将响应数据以 data 属性的形式存储在 state 中。而当 action 类型为 LOAD_DATA_FAILURE 时，我们同样将 loading 属性设置为 false，并将错误信息存储在 error 属性中。
Thunk Action Creator
在 Redux 应用程序中，thunk action creator 是指通过 redux-thunk 中间件处理异步操作的 action creator。我们可以在 thunk action creator 中发送异步请求，并根据请求状态分别触发不同的 action，例如 loading action、success action 和 failure action。
-- -------------------- ---- -------
------ ----- --------- - -- -- ----- ---------- -- -
--- -
--------------------------
----- -------- - ----- -------------------
----- ---- - ----- ----------------
--------------------------------
- ----- ------- -
---------------------------------
-
--在这段代码中，我们定义了一个 thunk action creator，它发送一个异步请求来获取数据。首先，我们在函数内部调用 loadDataBegin action，来设置 loading 状态为 true。然后，我们使用 fetch 函数来发送异步请求，返回的响应将会以 JSON 格式解析，并调用 loadDataSuccess action 来传递响应数据。如果请求过程中发生了错误，我们将在 catch 语句块中调用 loadDataFailure action，以传递错误对象。
如何在实际应用中使用？
在实际应用中，我们可以使用上述方法在 Redux 应用程序中处理异步请求的 loading 状态。以下是一个简单示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
----- --- - -- ----- -------- ------ --------- -- -- -
------------ -- -
------------
-- ----
-- --------- -
------ ----------------------
-
-- ------- -
------ ----------- ----------------------
-
------ -
-----
----- - -
----
---------------- ------ -- -
--- -----------------------
---
-----
- - -
------- ----------
--
------
--
--
----- --------------- - ------- -- --
----- -----------
-------- --------------
------ ------------
---
----- ------------------ - -
----------
--
------ ------- ------------------------ -------------------------在这个示例中，我们使用了 useEffect Hook 来在组件加载时调用 fetchData action creator。在渲染组件时，我们根据 loading 和 error 状态变量决定返回结果。如果 loading 为 true，则显示 'Loading...' 文本。如果 error 不为 null，则显示错误信息。否则，将渲染数据列表。
结论
通过以上的示例代码和流程分析，我们可以清晰地了解在 Redux 中如何处理异步请求的 loading 状态。在实际应用中，我们可以使用上述方法有效地解决异步请求时的 loading 状态问题，从而提高应用程序的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fcf156447136260174dc69