在前端开发中，我们经常需要处理一些异步任务，如请求数据、上传文件等，而这些任务的进度管理是一个比较繁琐的过程。为了简化这个过程，社区开发了很多相关的 npm 包，如 react-redux-task-progress。
在本文中，将详细介绍 react-redux-task-progress 的使用方法，并提供示例代码。
什么是 react-redux-task-progress？
react-redux-task-progress 是一个为 React 应用提供任务进度管理的 npm 包，它提供了 reducers、actions、selectors 等工具，可以轻松地管理任务的进度、状态、进度条显示等。
安装 react-redux-task-progress
安装 react-redux-task-progress 非常简单，只需使用 npm 或 yarn 进行安装即可：
// npm npm install react-redux-task-progress --save // yarn yarn add react-redux-task-progress
如何使用 react-redux-task-progress？
react-redux-task-progress 提供了 reducers、actions、selectors 等工具，可以轻松地管理任务的进度、状态、进度条显示等。
reducers
reducers 是一个根据旧 state 和 action 生成新 state 的函数。react-redux-task-progress 提供了多个 reducers，可以用来管理不同类型的任务。
以上传文件任务为例，我们可以使用 uploadFileReducer：
-- -------------------- ---- -------
------ - ----------------- - ---- ----------------------------
----- ------------ - -
----------- -
--------- --
------- ---
------ -----
----- -----
--
--
----- ----------- - -----------------
------ -----------------
----------- ------------------
---
---actions
actions 是一个描述任务状态变化的对象，用于更新 reducers 中的状态。react-redux-task-progress 提供了多个 actions，可以用来描述不同类型的任务状态变化。
以上传文件任务为例，我们可以使用 uploadFileActions：
-- -------------------- ---- -------
------ - ------------------ ------------- - ---- ----------------------------
------ ----- ----------------- - -------------------------------- ---------- ----------------- ----------------
------ ----- ----------------- - ---------------------------------
------ ----- ---------- - ------ -- ---------- -- -
-------------------------------------
--- -
-- ------
----- -------- - ----- -------------
---------------------------------------------------------
- ----- ------- -
----------------------------------------------
-
--selectors
selectors 是一个从 state 中提取信息的函数。react-redux-task-progress 提供了多个 selectors，可以用来获取不同类型任务的状态、进度等信息。
以上传文件任务为例，我们可以使用 uploadFileSelectors：
import { createSelectors } from 'react-redux-task-progress';
export const uploadFileSelectors = createSelectors((state) => state.tasks.fileUpload);
export const getUploadProgress = (state) => uploadFileSelectors.getProgress(state);
export const isUploadInProgress = (state) => uploadFileSelectors.isInProgress(state);
export const getUploadData = (state) => uploadFileSelectors.getData(state);
export const getUploadError = (state) => uploadFileSelectors.getError(state);组件使用
我们可以在组件中使用 react-redux 中的 connect 方法连接 reducers、actions 和 selectors：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ----------- ------------------ ------------------- -------------- - ---- ----------
----- ------------ ------- --------------- -
--------------------- - ------- -- -
----- - ---------- - - -----------
----------------------------------
--
-------- -
----- - --------- ----------- ----- - - -----------
------ -
-----
------ ----------- ------------------------------------- --
----------- -- ----------------------------
------ -- --------------------------------
------
--
-
-
----- --------------- - ------- -- --
--------- -------------------------
----------- --------------------------
------ ----------------------
---
----- ------------------ - -
-----------
--
------ ------- ------------------------ ----------------------------------总结
本文介绍了 react-redux-task-progress 的使用方法，包括如何安装、使用 reducers、actions 和 selectors，并提供了一个上传文件组件的使用示例。
希望本文能够对初学者理解任务进度管理有所帮助，并对 redux 中 reducers、actions、selectors 的使用有更深入的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590581e8991b448d6559