前言
在前端开发中，使用 Redux 进行状态管理已经成为了一种常见的做法。但是，随着应用逐渐复杂，Redux 在管理大量状态时会变得十分繁琐。因此，Dynamic Redux Modules 设计模式逐渐成为了一种趋势，可以有效地减轻 Redux 开发的负担。同时，Angular Redux Dynamic Modules 正好针对此问题提供了一种解决方案。
一、安装
使用 npm 进行安装：
--- ------- ------ ------------------------------
二、使用
1. 创建 Dynamic Redux Modules
首先，需要创建一个 Dynamic Redux Modules。代码示例如下：
------ - -------- - ---- ----------------
------ - ------------- - ---- ---------------------------------
------ - ---------------- ------- - ---- --------
------ - -------------------- - ---- -------------------
------ - --------- - ---- ---------------
------ - ----------- - ---- -----------------
------ - --------- - ---- ---------------
------ ----- ------------- - -------
-----------
-------- -
--------------------------------------- -
--------- -
-
--- --------------
--------------- -- -- ---------------------------- ----- ----------- ---
--
--
------ ------------
----------- -----------------------
------------ -------------------------
---
--
--
------ ----- ---------- --在 DynamicModule.forFeature 中，我们可以指定需要对哪个 state 进行处理，接着便可以在 reducers 中进行 state 的操作。而由于 Angular Redux Dynamic Modules 可以在运行时动态加载，所以我们需要将 reducers、epics、singletons 和 middlewares 加入到 feature 的配置中。
2. 导入 Dynamic Redux Modules
为了在整个应用中使用这个 module，我们需要将其加入 imports 数组中，如下所示：
----------- -------- --------------- ----------------- ------------ ------------- -------------- --------------- ---------- --------------- -- ------ ----- --------- --
那么，在这个应用中，我们就可以使用 User Module 提供的服务了。
3. 使用 Dynamic Redux Modules
下面，我们以一个 user state 的 Demo 为例，具体代码实现如下：
------ - --------- - ---- ----------------
------ - ------- ----- - ---- -----------------------
------ - ---------- - ---- -------
------ - --------- - ---- ---------------
------ - --------- - ---- -----------------
------------
--------- -----------
--------- -
--- ------------ - ----- -- -------- --------- -------
------- ------------------------- -------------
--
--
------ ----- ------------- -
----------------- ------ --------------------- - ----------
------------------- ------ ------ --
---------- -
--------------------- ----- --------- ---
-
-我们首先通过 @angular-redux/store 中的 select 选择器获取到 user$ 数据流，接着在 Click 事件中调用 loadData() 方法，通过 Redux 的 dispatch 方法触发 Action，最后便会更新 store 并实时呈现在 UI 中。
三、结论
Angular Redux Dynamic Modules 中提供了一种处理应用中状态管理的方式和工具，并可以在运行时动态加载和卸载模块。这个模块除了用于处理状态管理外，在 Angular 中也可以作为服务提供者，提供多种处理方法例如 Authentication Management 等，使用 Angular Redux Dynamic Modules，可以方便的处理应用中的各种状态，有助于更加好的实现可扩展的应用。
四、示例代码
完整的示例代码可以在 GitHub 上进行查看：https://github.com/angular-redux/user-dynamic-modules
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005671f81e8991b448e389a