前言
当我们进行前端网页开发时，经常会遇到需要给用户展示 Loading 状态的需求，以避免出现让用户感到网页无响应的情况。本文将会介绍如何使用 React 和 Redux 实现一个全局 Loading 效果的实现方式，以提高用户体验。
实现方式
前置知识
在开始之前，我们需要先了解一些基本的前置知识。
React：React 是一个用于构建用户界面的 JavaScript 库。
Redux：Redux 是一个用于 JavaScript 应用程序状态管理的开源库。
实现流程
1. 创建 Redux Store
在 Redux 中，有一个概念叫做 Store，它是一个存储整个应用程序状态的对象。我们可以使用 createStore 方法来创建一个 Store，并将它传递给根组件。
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ ----------- ---- -------------------
----- ----- - -------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--2. 创建 Redux Action
Action 是一个简单的 JavaScript 对象，它描述了将要发生的事情。我们可以通过 dispatch 方法将 Action 发送到 Store，Store 将根据 Action 的类型更新应用程序状态。
我们在这里创建一个名为 SET_LOADING 的 Action，表示启用或禁用全局 Loaing 技术。
export const SET_LOADING = 'SET_LOADING';
export const setLoading = (isLoading) => ({
type: SET_LOADING,
isLoading,
});3. 创建 Redux Reducer
Reducer 是一个纯函数，它将应用程序状态和 Action 作为输入，并返回一个新的状态。我们定义的 Reducer 将会根据传入的 Action 更新应用程序状态，并返回一个新的状态。
-- -------------------- ---- -------
------ - ----------- - ---- -------------
----- ------------ - - ---------- ----- --
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ---------- ---------------- --
--------
------ ------
-
--
------ ------- ------------4. 创建 Loading 组件
我们将创建一个名为 Loading 的组件，该组件将会负责展示全局 Loading 效果。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ------- - -- --------- -- --
--------- - -
---- --------------------
---- --------------------------------------------------------------------- ------------- --
------
- - -----
----- --------------- - ------- -- -- ---------- --------------- ---
------ ------- ----------------------------------5. 启用全局 Loading 效果
为了启用全局 Loading 效果，我们需要通过 dispatch 方法分发一个 Action 给 Store，并将 isLoading 的值设置为 true。我们的 Loading 组件根据 isLoading 的值来决定是否显示。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----------- - ---- --------------
------ - ---------- - ---- -------------
----- ---- - -- -- -
----- -------- - --------------
------------ -- -
---------------------------
------------- -- -
----------------------------
-- ------
-- ------------
------ --------------
--
------ ------- -----在上面的示例中，我们在 Home 组件中分发了一个 setLoading 的 Action，并将 isLoading 的值设置为 true，之后使用 setTimeout 方法来将其禁用。
示例代码
完整的示例代码可在 CodeSandbox 中查看。
总结
在本文中，我们通过 React 和 Redux 实现了一个全局 Loading 效果。通过这种方式，我们可以提高用户体验，为用户提供更好的体验。实现过程虽然较为简单，但希望本文能对初学者有所帮助，更好理解 Redux 的使用方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459ed32968c7c53b0c0797b