在前端开发中，状态管理是一项必不可少的工作。而 Redux 作为目前最流行的状态管理工具之一，能够提供一套完整的状态管理方案，其配套的丰富的中间件和插件包使得其功能更加强大。其中就包括了 redux-loading-reducer 这个非常实用的 npm 包，本文将详细讲解其使用教程。
什么是 redux-loading-reducer？
redux-loading-reducer 是 Redux 中的一个高阶 reducer，它能够让开发者更容易地管理全局的 loading 状态。在我们开发前端应用的时候，经常会遇到需要在数据请求过程中显示 loading 状态的需求，此时 redux-loading-reducer 就能为我们解决这一问题。
redux-loading-reducer 源码地址：https://github.com/LeetCode-OpenSource/redux-loading-reducer
安装和基本用法
安装命令：
npm install redux-loading-reducer
安装后，首先需要在 Redux 的 combineReducers 方法中引入 loading 这个 reducer：
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ ------- ---- ------------------------ ----- ----------- - ----------------- -- -- ------- -------- --- ------ ------- ------------
接下来，我们在需要显示 loading 状态的地方，如在组件中发起异步请求时，可以在发起请求前调用 loadingActions.start 方法，请求结束后调用 loadingActions.stop 方法，示例如下：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - -------------- - ---- ------------------------
----- ----------- ------- --------------- -
----------- -
----- - -------------- - - -----------
-- -------- ----- --
-----------------------
---------------------------------
-------------- -- -
-- -------- ---- --
----------------------
------ ----------------
--
---------- -- -
-- ----
--
------------ -- -
-- ----
---
-
-------- -
-- ----
-
-
----- --------------- - ----- -- -----
----- ------------------ - -------- -- --
--------------- ---------------------------------- ----------
---
------ ------- ------------------------ ---------------------------------通过这种方式，我们可以让 redux-loading-reducer 自动监听所有发起的异步请求，在请求正在进行时显示 loading 状态，在请求结束后消失。
高级用法
除了基本用法以外，redux-loading-reducer 还提供了一些高级用法：
添加自定义 loading bar 组件
我们可以通过 loadingActions.setLoadingBar 方法，为 redux-loading-reducer 添加自定义的 loading bar 组件。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - -------------- - ---- ------------------------
------ ------------ ---- -----------------
----- ----------- ------- --------------- -
------------------- -
----- - -------------- - - -----------
-------------------------------------------
-
-- ---
-
----- --------------- - ----- -- -----
----- ------------------ - -------- -- --
--------------- ---------------------------------- ----------
---
------ ------- ------------------------ ---------------------------------在这里，我们传入了一个自定义的 loading bar 组件 MyLoadingBar。这个组件可以有任意形式，只需保证其实现了显示和隐藏的逻辑即可。
配置全局 loading 消息
我们可以通过 loadingActions.setOptions 方法，为 redux-loading-reducer 配置全局 loading 消息。
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - -------------- - ---- ------------------------
----- ----------- ------- --------------- -
------------------- -
----- - -------------- - - -----------
---------------------------
-------- -------------------
---
-
-- ---
-
----- --------------- - ----- -- -----
----- ------------------ - -------- -- --
--------------- ---------------------------------- ----------
---
------ ------- ------------------------ ---------------------------------在这里，我们配置了一个全局 loading 消息，当页面中有异步请求正在进行时，将自动在页面中显示这个消息。
总结
通过本篇文章的介绍，我们了解了 redux-loading-reducer 这个简单而实用的 npm 包，并学习了它的基本使用、高级用法，以及在实际开发中的具体示例。在未来的前端开发中，我们可以应用它来更便捷地管理全局的 loading 状态，提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557b481e8991b448d4bcc