redux-offline-chain 是一个非常实用的前端 npm 包，它可以帮助开发者更加方便地处理 Redux Store 中的异步请求，特别是对于离线请求的处理。本篇文章将详细介绍该 npm 包的使用方法，并提供示例代码。
安装
我们可以使用 npm 或 yarn 安装 redux-offline-chain：
npm install redux-offline-chain
或者
yarn add redux-offline-chain
使用方法
初始化
首先，在应用中使用 redux-offline-chain 库之前，需要在 Redux Store 中进行初始化。我们需要将 redux-offline-chain 中的 createOfflineMiddleware 函数与 applyMiddleware 方法结合，代码如下：
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ - ------------------------ ------- - ---- ----------------------
------ - ---------- - ---- -------------
----- ------ - -
-------- -
-- ----
-
-
----- ------- - -----------------
---- -----------
-------- ----------------
---
----- ----- - ------------
--------
-------------------------------------------------
--在上面的示例中，createOfflineMiddleware 函数被用于生成一个 Redux Middleware，用于处理 Store 中的离线请求。
我们还可以在 config 对象中配置一些额外的选项，例如：
- queueTimeout: 请求被加入队列的超时时间（单位是毫秒），默认值为 0；
- retry: 是否需要重试失败的请求；
- persistOptions: 离线数据的持久化配置；
- effect: 在离线请求处理前的执行函数；
- discard: 离线请求被丢弃的处理方式。
操作
然后，我们就可以使用 redux-offline-chain 实现一些具有离线性质的操作。这些操作被称为 Chain，可以当作异步函数使用。对于基本的 Chain，它可以使用以下的代码进行创建：
-- -------------------- ---- -------
------ - ----------- - ---- ----------------------
----- ----- - -------------
----- --------
-------- -
--- ---------
--
------------ -
------- -
-- ---- --
--
--
---
----------------------图片描述
上面的代码中，我们使用 createChain 函数创建了一个类型为 FETCH 的 Chain，它只有一个 id 属性，这个 id 属性可以用于标识此次请求。
我们还可以在 offlineMeta 中配置更多选项，例如：
- effect: 在离线请求执行前，执行的函数；
- retry: 是否需要重试；
- discard: 请求被丢弃时的处理方式。
我们需要将这个 Chain Dispatch 到 Store 上，这样 redux-offline-chain 就可以处理它了。当你从 Store 中检索该 Chain 时，你可以看到 redux-offline-chain 已经将其加入到了离线请求队列中。
const state = store.getState(); console.log(state.offline.outbox); // [chain]
操作更新
有时候，我们需要更新我们的 Chain，例如重新发送、取消等。在 redux-offline-chain 中，我们可以直接通过其提供的中间件进行操作。例如：
-- -------------------- ---- ------- -- -------- ----- - ------ - - ------------------------- -- ------------ ----- ----- ----- - ---------- -- ------- ----- ------------------------ -- --- ----- --------------------------
其中，trySend 函数的作用是以最高优先级重新发送该离线 Chain，而 tryResume 函数会尝试从连接断开的状态恢复请求。
示例代码
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ - ------------------------ ------- - ---- ----------------------
------ - ----------- - ---- ----------------------
-- -------
----- ------------ - -
------ ---
--
------ ----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------------------
------ -
---------
------ ---------------- -------------------
--
--------
------ ------
-
--
-- ----
----- ------ - -
-------- -
------ -----
-------- ------- ------- -------- -- -
-- ------------ --- -------------------- -
-- -- ----------- ------
------ -------- - -- - - --- --
- ---- -
-- ---- ------
------ -----
-
--
--------------- -
---- -----
---------- ------------
---------- ------- --------
--
------------- -----
--
--
-- ----------
----- ----------------- - --------------------------------
----- ------- - -----------------
----- ------------
-------- ----------------
---
----- ----- - -------------------- ------------------------------------
-- ------ -------
----- ---------- - -- -- -
----- ----- - -------------
----- --------------
-------- -
---- -------------
------- ------
--
------------ -
------- - ---- -------------------- --
--
---
----------------------
--
-- -------
---------------------------------------------------------- -- -- -
-------------
---在上面的示例代码中，我们使用了 redux-offline-chain 搭配 redux-offline-queue，它们可以帮助我们更加高效的处理 redux Store 中的异步请求。可以看到，我们通过 createChain 函数创建一个名为 FETCH_USERS 的 Chain，这个 Chain 的 effect 参数指向了离线请求队列。
当我们在网络不稳定的情况下发送 FETCH_USERS 请求时，如果这个请求因为网络问题而无法成功，redux-offline-chain 会将其放在离线队列中。同时，如果每隔一段时间它不得不停止它的等待防止它一直占用空间，这也是可以配置的（queueTimeout 选项）。
如果某个离线请求超时或者离线队列被清空了，redux-offline-chain 会将该请求重新发送出去，如果尝试最多次数后还没有成功，则会丢弃该请求。在本例中，我们为 FETCH_USERS 类型的 requests 指定了 discard 措施，它将在第二次、第五次、第八次尝试时被丢弃。而对于所有其他类型的请求，我们使用了默认的丢弃措施。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005675981e8991b448e3d4a