什么是全局 loading 状态？
在前端开发中，我们经常需要在请求后端数据时显示一个 loading 动画，以告知用户请求正在进行中，避免用户在等待时操作造成误解操作。当然，这个 loading 动画需要在请求完成后消失。但是，每个组件都需要单独管理 loading 状态会很麻烦，而且会导致大量的冗余代码。
我们可以使用 Redux 来管理全局的 loading 状态，在任何地方 dispatch 一个 action，就能控制全局的 loading 状态。
实践
安装依赖
我们需要安装以下工具:
redux：Redux 状态管理库react-redux：React 绑定 Redux 库redux-saga：Redux 的一种高级别中间件，用于异步流程的控制。
npm install --save redux react-redux redux-saga
实现
我们先来创建一个 loading 的 reducer：
-- -------------------- ---- -------
-- -----------------------
----- ------------ - ------
------ ------- -------- -------------------- - ------------- ------- -
------ ------------- -
---- ----------------
------ -----
---- ---------------
------ ------
--------
------ ------
-
-有了 reducer ，我们还需要实现触发开始和停止的 action，我们定义这两个 action 分别为 startLoading 和 stopLoading，并创建 action 创造器：
-- -------------------- ---- ------- -- ---------------------- ------ ----- ------------ - -- -- -- ----- --------------- --- ------ ----- ----------- - -- -- -- ----- -------------- ---
接下来，在我们的 store 中，我们需要创建一个 Saga:
-- -------------------- ---- ------- -- -------------------- ------ - ---- ---------- - ---- --------------------- ------ - ------------- ----------- - ---- --------------------- --------- ------------------ - ----- -------------------- - --------- ----------------- - ----- ------------------- - ------ ------- --------- -- - ----- -------------------------- ------------------ ----- ---------------------------------- ----------------- ----- ---------------------------------- ----------------- -
在这个 Saga 中，我们使用 put 函数来 dispatch action，这个函数用于输出结果，我们在三个对应的 actions 中控制 loading 状态。
最后，我们将所有组件需要使用的 state 连接 Redux。我们导出 loadingReducer 并合并reducer:
-- -------------------- ---- ------- -- --------------------- ------ - --------------- - ---- -------- ------ -------------- ---- ------------ ----- ----------- - ----------------- -------- --------------- --- ------ ------- ------------
现在，你可以在任何组件中调用 startLoading 和 stopLoading，从而控制全局的 loading 状态，比如在 componentDidMount 中调用：
-- -------------------- ---- -------
-- ---------------------
------ - ------------------ - ---- --------
------ - ------- - ---- --------------
------ - ------------- ----------- - ---- ---------------------
----- --- ------- --------------- -
------------------- -
--------------------------
-----------
-------- -- -
-------------------------
--
--------- -- -
-------------------------
---
-
-------- -
------ -
------------------------ - ------------ - ----------------
--
-
-
----- --------------- - -- ------- -- -- -- ------- ---
----- ------------------ - -------- -- -------------------- ------------- ----------- -- ----------
------ ------- ------------------------ -------------------------总结
通过 Redux 和 Redux-saga 的使用，我们可以轻松地在应用程序中实现全局 loading 状态的控制。这个开源的状态管理库，让我们可以在前端应用程序中维护复杂的状态信息，对于开发大型的 React 应用程序，非常重要。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f7ed92f6b2d6eab301f561