介绍
redux-container-state-saga 是一个便利的 redux 库，它利用了 redux 和 redux-saga 的概念简化了处理容器状态 (Container State) 的过程。容器状态是指与组件无关的全局状态。理解和管理它们可能会有一些繁琐的工作，这正是 redux-container-state-saga 的意义所在。
redux-container-state-saga 有以下几个特性：
- 解耦组件和容器状态。
- 建立信道，允许多个容器从同一个状态中读取信息，同时保持独立。
- 通知所有容器状态的改变，使得它们可以自己更新。
- 支持状态命中、状态虚拟继承。
- 自带 hook，使用容易。
安装
可以通过 npm 进行安装：
npm install --save redux-container-state-saga
使用
1. 配置 redux
-- -------------------- ---- -------
------ - ---------------- ---------------- ----------- - ---- --------
------ -------------------- ---- -------------
------ - --- - ---- ---------------------
------ - -------------- - ---- -----------------------------
-- ----
----- --------------------- - -----------------------
-- -- -------
----- ----------- - -----------------
--------------- ----------------------
-- ------ ---------------------
---
-- ---- ----
--------- ---------- -
----- -----
-- ---- ----
----------------------
-- ------ ------------------
---
-
-- ------ -----
----- -------------- - -----------------------
----- -------- - --------------------------------
----- ----- - ------------------------ ----------
-----------------------------2. 添加容器状态
在 store 的容器状态里添加一个名为 'myContainer' 的状态：
import { containerState } from "redux-container-state-saga";
const myContainer = containerState.add('myContainer', {
data: "initial data",
});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
