npm 包 redux-worker-queue 使用教程

Redux-worker-queue 是一款基于 Redux 的 npm 包，它可以帮助我们更方便地处理异步任务。在前端开发中，异步任务无疑是很常见的，例如网络请求、文件上传等等，这些任务通常需要一些时间来完成，而在这段时间内，我们希望能够让用户看到一些提示，告诉他们任务正在处理中。Redux-worker-queue 正是为解决这个问题而设计的。

安装

使用 npm 安装：

npm install redux-worker-queue

快速入门

首先在项目中引入 redux-worker-queue：

import createWorkerQueue from 'redux-worker-queue';

创建 worker queue：

const workerQueue = createWorkerQueue();

在 reducer 中注册 action type：

workerQueue.register('FETCH_DATA');

定义 action：

const fetchData = () => ({
  type: 'FETCH_DATA',
  worker: async (dispatch, getState, { baseUrl }) => {
    dispatch({ type: 'FETCH_DATA_PENDING' });
    const data = await fetch(`${baseUrl}/data`).then(res => res.json());
    dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
  },
});

在组件中 dispatch action：

this.props.dispatch(fetchData());

最后，我们可以在 reducer 中处理任务状态：

-- -------------------- ---- -------
----- ------------ - -
  ----- -----
  ---------- ------
--

----- ------- - ------ - ------------- ------- -- -
  ------ ------------- -
    ---- ---------------------
      ------ - --------- ---------- ---- --
    ---- ---------------------
      ------ - --------- ---------- ------ ----- -------------- --
    --------
      ------ ------
  -
--

这就是一个最简单的 worker queue 的使用示例。

深入了解

createWorkerQueue 函数

该函数用来创建一个 worker queue。可以传入一些参数配置：

• concurrency: number = 1：指定 worker 数量，默认为 1。
• timeout: number = 0：指定任务执行超时时间，单位为毫秒，默认为 0，即不设超时时间。
• retry: number | boolean = false：指定任务执行失败时是否自动重试，默认为不重试。

const workerQueue = createWorkerQueue({
  concurrency: 2,
  timeout: 10000,
  retry: 3,
});

register 方法

该方法用来注册 action type，并返回一个新的 action creator：

const fetchData = workerQueue.register('FETCH_DATA');

注册后的 action creator 与普通的 action creator 不同，它会在被 dispatch 后被进入 worker queue，而不是直接被 reducer 处理。下面是一个注册 action creator 的例子：

const fetchData = workerQueue.register('FETCH_DATA');
const fetchMoreData = workerQueue.register('FETCH_MORE_DATA');

worker 函数

注册的 action creator 中需要指定 worker 函数，该函数将在 worker queue 中被执行。该函数接收以下参数：

1. dispatch：与普通的 action creator 相同，在执行中可以调用 dispatch 方法来更新 store。
2. getState：与普通的 action creator 相同，可以获取当前 store 中的 state。
3. props：任意对象，用于传递一些额外的参数。

下面是一个 worker 的例子：

-- -------------------- ---- -------
----- --------- - -----------------------------------
----- ------------- - ----------------------------------------

----- ------ - ----- ---------- --------- - ------- -- -- -
  ---------- ----- -------------------- ---
  ----- ---- - ----- --------------------------------- -- ------------
  ---------- ----- --------------------- -------- ---- ---
-

----- --------- - -- -- --
  ----- -------------
  -------
  ------ -
    -------- --------------------------
  --
---

----- ------------- - -- -- --
  ----- ------------------
  -------
  ------ -
    -------- --------------------------
  --
---

cancel 方法

该方法用来取消还未执行的任务：

const taskId = this.props.dispatch(fetchData()).payload.taskId;
this.props.dispatch(cancel(taskId));

getQueueState 方法

该方法用来获取当前队列状态：

const queueState = workerQueue.getQueueState();
console.log(queueState);

处理任务状态

在 reducer 中，可以处理任务的状态。对于一个任务，它可以有以下状态：

1. PENDING：任务还未开始执行。
2. PROCESSING：任务正在执行中。
3. DONE：任务执行完成。
4. FAILED：任务执行失败。

下面是一个处理任务状态的例子：

-- -------------------- ---- -------
----- ------------ - -
  ----- -----
  ---------- ------
--

----- ------- - ------ - ------------- ------- -- -
  ------ ------------- -
    ---- ---------------------
      ------ - --------- ---------- ---- --
    ---- ------------------------
      ------ - --------- ---------- ---- --
    ---- ------------------
      ------ - --------- ---------- ------ ----- -------------- --
    ---- --------------------
      ------ - --------- ---------- ----- --
    --------
      ------ ------
  -
--

总结

Redux-worker-queue 是一个非常实用的 npm 包，它可以帮助我们更方便地处理异步任务。本文介绍了如何在项目中使用它，并详细说明了其使用方式和注意事项。希望本文能对大家有所帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cea