在前端开发中，我们经常会遇到需要在异步请求数据时显示 Loading 状态的需求。在 React 应用中，我们可以使用 Redux 来管理全局的 Loading 状态。
Redux 简介
Redux 是一个可预测的状态容器，用于 JavaScript 应用程序的管理。它通过使用单一的不可变对象来管理应用程序的状态，使得应用程序的状态变得可预测且易于调试。
Redux 的核心概念包括：
- Store：存储应用程序的状态
- Action：描述应用程序中发生的事件
- Reducer：处理状态的改变
管理全局的 Loading 状态
在 Redux 应用中，我们可以通过添加一个全局的 Loading 状态来管理异步请求数据时的 Loading 状态。下面是一个示例代码：
-- -------------------- ---- -------
-- -- ------ --
----- ------------- - ----------------
----- ------------ - ---------------
-- -- ------ -------
----- ------------ - -- -- --
----- --------------
---
----- ----------- - -- -- --
----- -------------
---
-- -- -------
----- -------------- - ------ - ------ ------- -- -
------ ------------- -
---- --------------
------ -----
---- -------------
------ ------
--------
------ ------
-
--
-- -- -----
----- ----- - ----------------------------在上面的代码中，我们定义了两个 action 类型：START_LOADING 和 STOP_LOADING，并分别定义了对应的 action creator。我们还定义了一个 loadingReducer，用于处理 Loading 状态的改变。最后，我们使用 createStore 函数创建了一个 store 对象。
接下来，我们可以在异步请求数据的代码中使用 dispatch 函数来触发 START_LOADING 和 STOP_LOADING action，从而管理全局的 Loading 状态。下面是一个示例代码：
-- -------------------- ---- -------
-- ------
----- --------- - ----- -- -- -
--- -
-- -- ------------- ------
-------------------------------
-- ----
----- -------- - ----- --------------------------------------
-- ------
----- ---- - ----- ----------------
-- -- ------------ ------
------------------------------
-- ----
-- ---
- ----- ------- -
-- ----
-- ---
-
--在上面的代码中，我们在 fetchData 函数中使用 dispatch 函数触发了 START_LOADING 和 STOP_LOADING action。在请求数据时，我们首先触发 START_LOADING action 来显示 Loading 状态，等数据请求成功后再触发 STOP_LOADING action 来隐藏 Loading 状态。
总结
通过使用 Redux 来管理全局的 Loading 状态，我们可以使得异步请求数据时的 Loading 状态变得可预测且易于调试。在实际开发中，我们可以根据具体需求来扩展全局的状态，例如添加全局的错误状态等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6569258cd2f5e1655d1b424c