在 React 的应用开发中，我们通常需要管理很多的异步请求和数据流，这些数据流的状态需要被传递和共享。同时，为了提升用户体验，我们也需要一个全局的 loading 状态来告诉用户正在等待响应。在这篇文章中，我们将会学习如何结合 Redux 和 React 使用全局 Loading 状态，以及如何在整个应用程序中对其进行管理。
基本概念
在开始之前，我们需要先了解一些基本概念。Redux 是一个 JavaScript 应用程序的可预测状态容器，它使得状态管理变得简单且可预测。React 是一个视图层框架，用于构建用户界面。Redux 和 React 的结合使用可以轻松地进行状态管理和应用程序开发。
在 Redux 中管理全局 Loading 状态
为了管理全局的 loading 状态，我们需要在 Redux 中定义一个新的状态，以便在整个应用程序中共享它。我们可以使用 Redux 的一个中间件来实现这个目的 - Redux Thunk。
-- -------------------- ---- ------- -- ---------- ------ ----- ---------- - --------- -- -- ----- -------------- -------- -------- --- -- -------- ------ ----- ------------- - --------- -- ---------- -- - ------------------------------ --
在上面的代码中，我们定义了一个 setLoading 的函数，它将会触发 SET_LOADING 的 action，将 loading 的状态设置为真或假。我们还定义了一个 toggleLoading 的函数，用于触发 setLoading 并将 loading 的状态切换为真或假。
现在我们已经定义了基本的操作，接下来就需要将这些操作应用到我们的 Redux Store 中。
-- -------------------- ---- -------
-- ----------
----- ------------ - -
-------- ------
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- --------------
------ -
---------
-------- ---------------
--
--------
------ ------
-
--
------ ------- --------在上面的代码中，我们定义了一个 reducer 函数，用于根据 action 类型修改 loading 状态。这个函数接收两个参数，第一个参数是当前的状态，第二个参数是触发的 action。在这个函数中，我们将会根据 action 的类型来修改 loading 的状态，返回一个新的状态对象。
在 React 中控制全局 Loading 状态
现在我们已经在 Redux 中定义了全局的 loading 状态，接下来我们需要在 React 中控制这个状态。在 React 的组件中，我们可以使用 connect 函数来将我们定义的状态和操作映射到组件的 props 中。
-- -------------------- ---- -------
-- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ------------- - ---- ----------
----- --- ------- --------------- -
------------------- -
-------------------------------
-- --------
-----------------------------------------------------
---------------- -- ----------------
------------ -- ------------------
----------- -- ---------------------------------
-
-------- -
----- - ------- - - -----------
------ -
-----
-------- -- ----------------------
--------- ----------
------
--
-
-
----- --------------- - ------- -- --
-------- --------------
---
----- ------------------ - -
--------------
--
------ ------- ------------------------ -------------------------在上面的代码中，我们将 toggleLoading 函数和 loading 状态关联到了组件的 props 中，这使得我们能够在组件中使用它们。在 componentDidMount 生命周期周期中，我们使用 toggleLoading 函数将 loading 状态设置为 true，在异步请求完成后再将状态切换回 false。当状态为 true 时，我们会在组件中显示 loading 界面。
总结
在本文中，我们学习了如何在 Redux 和 React 中结合使用全局 loading 状态，实现了一个异步请求时的 loading 状态显示，并了解了如何在整个应用程序中对其进行管理。此外，我们还学习了一些关于 Redux 和 React 的基本概念，这对于我们理解整个过程非常有帮助。掌握这些知识，将使我们能够更加高效地开发 React 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b44ff3add4f0e0ffd3f415