前言
在前端开发中，使用 Redux 进行状态管理已经成为了一种常见的做法。但是，随着应用逐渐复杂，Redux 在管理大量状态时会变得十分繁琐。因此，Dynamic Redux Modules 设计模式逐渐成为了一种趋势，可以有效地减轻 Redux 开发的负担。同时，Angular Redux Dynamic Modules 正好针对此问题提供了一种解决方案。
一、安装
使用 npm 进行安装：
npm install --save @angular-redux/dynamic-modules
二、使用
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 数组中，如下所示：
@NgModule({ imports: [BrowserModule, AppRoutingModule, UserModule], declarations: [AppComponent, UserComponent], bootstrap: [AppComponent], }) export class AppModule {}
那么，在这个应用中，我们就可以使用 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
