NPM 包 redux-container-state-saga 使用教程

阅读时长 9 分钟读完

介绍

redux-container-state-saga 是一个便利的 redux 库,它利用了 redux 和 redux-saga 的概念简化了处理容器状态 (Container State) 的过程。容器状态是指与组件无关的全局状态。理解和管理它们可能会有一些繁琐的工作,这正是 redux-container-state-saga 的意义所在。

redux-container-state-saga 有以下几个特性:

  • 解耦组件和容器状态。
  • 建立信道,允许多个容器从同一个状态中读取信息,同时保持独立。
  • 通知所有容器状态的改变,使得它们可以自己更新。
  • 支持状态命中、状态虚拟继承。
  • 自带 hook,使用容易。

安装

可以通过 npm 进行安装:

使用

1. 配置 redux

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

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

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

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

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

2. 添加容器状态

在 store 的容器状态里添加一个名为 'myContainer' 的状态:

3. 添加容器状态的 reducer 和 saga

在根 reducer 中添加 'myContainer' 的 reducer:

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

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

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

建立 'myContainer' 的 saga:

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

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

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

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

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

将 'myContainerSaga' 添加到 root saga 中。

4. 在组件上使用容器状态

要使用容器状态,需要使用 'useContainerState' 这个 hook。使用 hook 前需要传入容器的键,以及连接的状态和操作:

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

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

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

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

上面的例子中,useContainerState 使用 'myContainer' 这个键来连接容器状态。第二个参数是一个对象,它指定了容器状态的初始值以及它如何映射到组件的状态字段。最后一个参数指定了操作容器状态的方法。

示例代码

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

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

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

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

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

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

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

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

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

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

总结

通过使用 redux-container-state-saga 库,我们可以更简单地管理容器状态。它提供了一个简单而有力的方式来解决组件复杂度的问题,可以使我们更加轻松地编写和维护代码。但值得注意的是,这并不是一个 silver bullet,您仍然需要理解 redux 和 redux-saga 的知识来使用它。希望这篇文章能够为你提供一些帮助。

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

纠错
反馈