在前端应用中，我们经常需要管理各种异步请求的 loading 状态，以便在应用中展示对应的加载动画或提示信息。而 redux-loading-manager 是一个基于 Redux 的状态管理工具，用于管理前端应用中的 loading 状态，方便我们处理异步请求时的 loading 状态变化，并且可以将其与其他 Redux Store 一起使用。下面本文将介绍 npm 包 redux-loading-manager 的使用教程，包括安装、配置、使用和 API 介绍等内容。
安装
在命令行中输入以下命令进行安装：
npm install redux-loading-manager --save
注意，redux-loading-manager 需要依赖 Redux 和 promises-aplus。
配置
在 Redux Store 中配置 redux-loading-manager：
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ --------------- ---- --------------
------ - -------------------- - ---- ------------------------
------ -------- ---- -------------
----- -------------- - -----------------------
----- ----- - ------------
-----------------
------------
--------------- ----------------------- -- - -------------- --- -----
---
-------------------------------- ------------------------------
--其中，createLoadingManager 用于创建一个 LoadingManager 实例，reducer 用于将返回的状态更新至 Store，middleware 用于处理异步请求时的 loading 状态变化。
使用
在异步处理的 Action Creator 中使用 loadingManager 的 API，例如动态切换 loading 状态：
-- -------------------- ---- -------
------ - -------------- - ---- ------------------------
------ ----- --------- - -- -- -------- -- -
-------------------------------------------------
------ ------------------
-------------- -- ----------------
---------- -- -
---------------------------------------------------- -- -- ------- --
---------- ----- ------------- -------- ---- ---
---
--上述代码中，addLoading 用于添加 loading 状态，removeLoading 用于关闭 loading 状态。
API 介绍
addLoading(key)
添加 loading 状态，key 为 loading 状态的唯一标识符。
removeLoading(key)
关闭 loading 状态，key 为 loading 状态的唯一标识符。
getList()
获取当前的 loading 状态列表。
isLoading(key)
判断当前是否存在对应的 loading 状态。
示例代码
您可以通过以下代码调试 redux-loading-manager：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - --------- - ---- ------------
------ - -------------- - ---- ------------------------
----- --- ------- --------- -
------------------- -
-----------------------
-
----------------------------- -
-- -------------------- -- ---------------------- -
--------------------
-
-
-------------- -
-- ---------------------- -
------------------------------------------
-
-
-------- -
----- - ---------- ---- - - -----------
------ -
-----
---------- -- ----------------------
----- -- ------------------
------
-
-
-
----- --------------- - ----- -- --
---------- --------------------------------------
----- -----------
---
----- ------------------ - -------- --
-------------------- --------- -- ----------
------ ------- ------------------------ -------------------------总结
redux-loading-manager 可以方便地管理前端应用中的 loading 状态，支持将其添加至 Redux Store 中使用，使用简单，API 丰富，可以帮助我们更好地处理异步请求的 loading 状态变化。希望本文的介绍可以帮助大家更好地使用 redux-loading-manager，提升前端应用的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f9d9381d61a3540fb9