随着前端应用复杂度的不断提高，数据的处理也变得越来越复杂，特别是在多个异步请求的场景下，数据加载的状态控制和 UI 显示不仅繁琐而且容易出错。
为了解决这个问题，Redux-loading 这个 npm 包应运而生，它在 React 和 Redux 的基础上，提供了一套解决数据加载状态的方案。在本文中，我们将详细介绍如何在项目中使用 Redux-loading，并通过示例代码演示如何应用。
什么是 Redux-loading?
Redux-loading 是一款可插拔的 Redux 中间件，它提供了一个通用的数据加载状态控制方案。它通过在 Redux Store 中添加 loading 状态，从而实现了数据请求的状态控制，并且可以通过界面展示 loading 状态，使用户更好的了解当前的数据加载状况。
如何使用 Redux-loading?
Redux-loading 的使用非常简单，只需要以下三个步骤：
步骤一：安装 Redux-loading
在项目中使用 Redux-loading，需要先安装该 npm 包，可以使用 npm 或者 yarn 安装。
npm install redux-loading --save # 或者 yarn add redux-loading
步骤二：创建 Redux Store
在 Redux Store 中添加 redux-loading 中间件，代码如下：
import { createStore, applyMiddleware } from 'redux'
import createLoadingMiddleware from 'redux-loading'
import reducer from './reducers'
const loadingMiddleware = createLoadingMiddleware()
export default createStore(reducer, applyMiddleware(loadingMiddleware))需要注意的是，createLoadingMiddleware 函数返回的是一个中间件，在项目中使用时，需要通过 applyMiddleware 函数将这个中间件与其他中间件一起应用。
步骤三：在 action 中使用 redux-loading
在 Redux 的 action 中，我们可以使用以下函数来控制数据加载状态：
- startLoading：开始加载数据
- endLoading：加载数据结束
代码如下：
-- -------------------- ---- -------
------ - ------------- ---------- - ---- ---------------
----- ------------- - -------- -- ----- ---------- -- -
--- -
----------------------------------
----- ------ - ----- -------------------------
--------------------------------
---------------------------------
- ----- ------- -
--------------------------------
-----------------------------------------
-
-在这个示例中，我们通过 startLoading 开始加载数据，并且在加载结束后调用 endLoading 函数来更新加载状态。
我们可以在 UI 上显示相应的 loading 状态，在加载完成时更新 UI 界面。
使用示例
接下来我们将通过一个简单的 TodoList 示例代码来演示 Redux-loading 的使用。
完整代码请参考：https://github.com/username/redux-loading-example/
在这个示例中，我们将演示如何使用 Redux-loading 控制数据加载状态，并在 UI 上展示 loading 状态。
首先是 Redux Store 的创建：
-- -------------------- ---- ------- ------ - ---------------- ----------- - ---- ------- ------ ----------------------- ---- --------------- ------ ----- ---- ------------- ------ ----------- ---- ------------ ----- ----------------- - ------------------------- ------ ------- ------------------------ ---------------------- -------------------
在这个示例中，我们使用了 thunk 中间件来处理异步请求，并将 createLoadingMiddleware 与 thunk 中间件一起应用到了 Redux 的 Store 中。
接下来，是 Action 的创建，以下是 TodoList 的 Actions:
-- -------------------- ---- -------
------ - ------------- ---------- - ---- ---------------
------ ----- ------------- - ---------------
------ ----- ------------ - -------- -- ----- ---------- -- -
--- -
-------------------------------
----- ------ - ----- ----------------------------
----- ----- - ----- -------------
-----------------------------
-----------------------------
- ----- ------- -
-----------------------------
------------------
------ -----
-
-
------ ----- ------------ - ------- -- --
----- --------------
------
--在此示例中，我们在 requestTodos 函数中，使用 startLoading 开始加载数据，并在加载完成后，更新 loading 状态。
最后，我们需要在 UI 页面上来展示 loading 状态。以下是 TodoList 组件代码的实现：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ------------ - ---- ------------
----- ---- - -- -- -
----- -------- - --------------
----- - ----- - - ------------------- -- -------------
----- - ------------ - - ------------------- -- ---------------
------------ -- -
--------------------------------
-- ---
------ -
-----
------------- -- ------------ ---------------
-------------- -- ---------------- -- -
---- ----------------------------------
---
------
-
-
------ ------- -----在这个示例中，我们通过 useSelector 函数从 Redux Store 中获取 loading 状态，从而展示相应的 loading 状态。
总结
在本文中，我们详细介绍了 npm 包 Redux-loading 的用法，并通过示例代码，演示了如何在项目中应用该包解决数据加载状态的问题。
Redux-loading 包提供了一个通用的数据加载状态控制方案，简化了数据加载状态的处理，并且可以通过一个 loading 的状态来对 UI 进行显示控制，提高了用户体验。
在实际项目开发中，如果遇到数据加载状态的控制繁琐问题，可以尝试使用 Redux-loading，从而提高开发效率，减少错误率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8a8d