介绍
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