npm 包 redux-offline-actions 使用教程

阅读时长 11 分钟读完

概述

redux-offline-actions 是基于 Redux 的一个 npm 包,可以帮助开发者更好地处理离线操作。在该教程中,我们会详细介绍如何使用 redux-offline-actions 来实现离线操作,并给出一些示例代码。

安装

使用 npm 安装 redux-offline-actions:

使用方法

创建一个离线 action

使用 createOfflineAction 函数来创建一个离线 action。它接受两个参数:一个 payload creator 和一个 meta creator。payload creator 是一个函数,用于创建要发送的 payload;meta creator 是一个函数,用于创建 meta 数据。

在 reducer 中处理离线 action

使用 createOfflineReducer 函数来创建一个 reducer,用于处理离线 action。它接受一个 reducer 和一个配置对象。配置对象包含以下选项:

  • effect: 处理传入的 action 的副作用函数
  • retry: 如果没有成功,重试的次数
  • discard: 如果已经超过了重试次数,丢弃 action
  • offlineFilter: 用于过滤哪些 action 应该进入离线队列
-- -------------------- ---- -------
------ - -------------------- - ---- ------------------------

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

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

创建离线缓存中间件

使用 createOfflineMiddleware 函数来创建一个离线缓存中间件。它接受一个离线缓存配置对象。配置对象包含以下选项:

  • effect: 处理传入的 action 的副作用函数
  • retry: 如果没有成功,重试的次数
  • discard: 如果已经超过了重试次数,丢弃 action
  • offlineFilter: 用于过滤哪些 action 应该进入离线队列
-- -------------------- ---- -------
------ - ----------------------- - ---- ------------------------

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

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

在 store 中使用离线缓存中间件

将中间件添加到 store 中:

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

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

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

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

使用离线 action

可以像普通的 action 一样使用离线 action。但是,当网络不可用时,它们会进入离线队列,等待网络恢复。

在组件中展示离线状态

使用 withOfflineStatus 高阶组件来添加离线状态属性。它接受一个 mapStateToProps 函数,可以根据 state 返回一个离线状态属性。

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

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

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

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

离线队列状态

可以通过 getState().offline.queue 获取当前的离线队列状态:

示例代码

下面是示例代码:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8c2d

纠错
反馈