在前端开发中，状态管理是非常重要的一环，而 Redux 更是一款非常流行的状态管理工具。在 Redux 中，我们可以通过 action 来改变应用程序的状态，并且通过 reducers 来管理状态，并确保状态的可预测性和统一性。
在有些应用程序中，我们需要展示一个进度条，以表示操作的状态，这时我们可以借助 Redux-NProgress，这是一个基于 Redux 的进度条组件，它是一个封装好的 NPM 包，可以帮助我们方便地实现进度条的效果，同时还提供了许多自定义配置选项。
Redux-NProgress 的安装
在使用 Redux-NProgress 之前，我们需要先安装它。可以通过以下命令来完成：
npm install --save redux-nprogress
安装完成后，我们就可以在项目中使用 Redux-NProgress 了。
Redux-NProgress 的配置
在使用 Redux-NProgress 之前，我们需要进行一些配置。以下是一些常用的配置项：
showSpinner: 是否显示加载图标ease: 进度条滚动的速度speed: 进度条加载速度minimum: 进度条最小值trickle: 进度条滚动触发的最小延迟时间parent: 进度条添加到的 DOM 元素的 Class 名称template: 进度条的 HTML 模板container: 进度条添加到的 DOM 元素的 Class 名称
在 Redux 中，我们需要将该插件作为中间件进行配置，以下是一个典型的配置：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------------- - ---- ---------------------------
------ ------------------------- ---- ------------------
------ ----------- ---- ------------
----- ------------------- - ---------------------------
------- -------
------ ----
------------ ------
---
----- ----- - ------------
------------
--------------------
-------------------------------------
--
--
------ ------- ------这里我们定义了一个 nprogressMiddleware 中间件，并将其加入到 createStore 函数中。在此之后，我们便可以使用 Redux-NProgress 插件了。
Redux-NProgress 的使用
使用 Redux-NProgress 非常简单，在触发 action 时，进度条会自动运行。我们可以通过 action 进行控制。以下是一些常用的例子：
-- -------------------- ---- -------
------ - ------------- ---------- - ---- ------------------
------ ----- ----------- - ------ -- -
------ -------- -- -
-------------------------
------------ - ----- ---- --
---------- -- -
-----------------------
------ ------------
--
-------------- -- -
-- ----
--
-
-在上面的代码中，当 requestData 函数执行时，我们会开始加载进度条（通过调用 startLoading），在数据处理完成后，我们会结束加载进度条（通过调用 endLoading）。
总结
Redux-NProgress 是一款相当有用的插件，在需要一个进度条的应用程序中，它可以为我们提供强大的帮助。在使用过程中，我们可以通过配置选项进行个性化的设置，并且在 action 中简单地调用该插件，便能够而快捷方便地实现进度条的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8c11