简介
Redux 是一个很流行的状态管理库，它使用的是单一数据源和纯函数来管理应用的 state ，这个库的主要优点是易于测试，可预测性强。但是随着应用逐渐复杂，state 的管理有时并不是那么容易，尤其是对于那些可以根据用户界面动态生成的应用程序。这时，使用 redux-dynamics 这个 npm 包来管理状态将变得非常有用。
redux-dynamics 是一个用于管理动态生成的 Redux store 的辅助包，基于 Reducer 函数的树状结构。redux-dynamics 允许您在运行时定义和注册新的 redux reducers 到给定的 key 下，以及在不同层级的 key 中注册多个 reducer 作为子 reducer。这个包使得动态生成 Redux store 变得非常容易。
安装
npm install redux-dynamics
使用方法
目录结构
redux-dynamics 需要一定的目录结构才能正确工作。
首先，需要至少一个主 reducer ，它是所有子 reducer 的入口点。例如：
-- -------------------- ---- ------- ----- ----------- - ----------------- ------ ------- ------ --------- --- -- ------ ------- -----------
然后，我们需要一个目录用于存放所有动态生成的 reducer 以及一个入口文件用于导入它们。例如：
- reducers
- index.js
- groups
- index.js
- students
- index.js
- ...每个子目录都应该有一个与目录同名的主 reducer ，用于将子目录中定义的所有 reducer 组合在一起。例如，students 目录应该有一个主 reducer 用于将所有的学生 reducer 组合在一起。
注册 reducer
要在 redux store 中注册一个新的 reducer ，可以调用 dispatch 函数，注册新的 reducer 实例，并指定 reducer 在树状结构中的位置。例如：
-- -------------------- ---- ------- ------ - ----------- - ---- ------- ------ - --------------- - ---- ---------------- ------ ----------- ---- ------------ ----- ----- - ------------------------ ----- ---------- - ------- ------- -- - --- - ------------------------------------------ - ---- ------------ ---
在这个例子中，我们在 students 目录下注册了新的 reducer 。
注销 reducer
要注销已经注册的 reducer ，可以调用 dispatch 函数，注销 reducer 实例，并指定 reducer 在树状结构中的位置。例如：
store.dispatch(unregisterReducer({
key: ['groups', 'students']
}))在这个例子中，我们注销了 groups 子目录下的 students 目录中的所有 reducer 。
示例代码
-- -------------------- ---- -------
------ ----- ---- -------
------ - --------- ------- - ---- -------------
------ - ----------- - ---- -------
------ - ---------------- ----------------- - ---- ----------------
------ ----------- ---- ------------
----- ----- - ------------------------
----- ---------- - ------- ------- -- -
------ ------------- -
---- --------------
------ -
---------
--------- - ------------------ -------------- -
-
--------
------ -----
-
-
------------------------------------------ -
---- ------------
---
----- --- - -- --------- ---------- -- -- -
-----
--------------------- -- -
---- -------------------------------------
---
------- ------------------------ --- ----------------
------
-
----- --------------- - ----- -- --
--------- --------------
--
----- ------------------ - -------- -- --
----------- -- -- ---------- ----- -------------- -------- - --- ----------- ----- ---- -------- ---
--
----- ------------ - ------------------------ ------------------------
----- ------ - ----------- -- -
--------- --------------
---------- --
-----------
-
----------------
---------------------
-------------------------------
-
----------------------------------
---- ------------
---这个例子中我们在组件中注册了一个新 reducer，它可以动态地添加新的学生信息到我们的 Redux store 中。当然，我们也可以在组件卸载的时候注销这个 reducer，以免出现在不应该存在的 reducer 导致意外 action 的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005751581e8991b448ea3a0