Angular 5 + NgRx状态管理实现方案正确性咨询

嘿，针对你在Angular 5应用里用NgRx做状态管理的问题，我来帮你捋捋当前实现的合理性，以及重启恢复状态的处理方案～

先说说「每个页面独立Reducer+状态」的实现 #

这种做法本身完全没问题，甚至在很多场景下是非常推荐的，具体分两种情况来看：

适用场景（当前实现很合适） #

如果你的6个页面是完全独立的——没有跨页面的状态共享（比如页面A的表单值不需要传给页面B）、也没有全局状态依赖（比如用户登录状态这类全局数据），那每个页面单独维护自己的Reducer和状态是非常符合单一职责原则的：

• 每个Reducer只负责对应页面的状态逻辑，代码边界清晰，维护起来很方便，改页面1的状态逻辑不会影响到其他页面
• 每个页面的状态结构可以完全贴合自身表单的需求，不用迁就全局结构

需要优化的场景（如果有跨页交互/共享状态） #

如果页面之间存在状态交互，或者有全局共享数据（比如用户信息、系统配置），那建议调整为「全局状态 + 页面级feature状态」的结构：

• 把全局共享的状态抽成独立的Reducer（比如authReducer）
• 每个页面的状态作为feature状态挂载到全局State下，比如：

// 全局State结构
export interface AppState {
  auth: AuthState; // 全局共享状态
  page1: ReducerPage1State;
  page2: ReducerPage2State;
  // ... 其他页面状态
}

这样既保持了页面状态的独立性，又能方便地跨页面访问共享状态。

关于「应用重启恢复状态」的处理 #

如果要实现页面刷新后恢复之前的表单状态，你可以借助NgRx的meta-reducer来做状态持久化，具体步骤如下：

1. 安装适配Angular 5的状态持久化库
   针对Angular 5，你可以用ngrx-store-localstorage的对应版本（比如v3.x，要注意和NgRx版本匹配），通过npm安装：

   npm install ngrx-store-localstorage@3 --save
   

2. 配置meta-reducer实现持久化
   在Store的根配置里，添加localStorage同步的meta-reducer，指定需要持久化的状态路径：

   import { localStorageSync } from 'ngrx-store-localstorage';
   import { StoreModule } from '@ngrx/store';
   
   // 定义需要持久化的状态键（对应每个页面的状态）
   const syncKeys = ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'];
   
   // 创建meta-reducer
   function localStorageSyncReducer(reducer: ActionReducer<any>): ActionReducer<any> {
     return localStorageSync({ keys: syncKeys })(reducer);
   }
   
   // 注册Store
   @NgModule({
     imports: [
       StoreModule.forRoot(
         {
           page1: page1Reducer,
           page2: page2Reducer,
           // ... 其他页面Reducer
         },
         { metaReducers: [localStorageSyncReducer] }
       )
     ]
   })
   export class AppModule {}
   

3. 注意事项

   • 表单状态里如果包含FormControl这类不可序列化的对象，不能直接持久化，你需要在Reducer里只存储表单的纯数据值（比如formValue: { name: string, age: number }），页面初始化时再把这些值回填到表单控件里
   • 每个页面的Reducer要设置好初始状态，确保即使没有持久化数据，页面也能正常初始化，避免出现undefined的错误

总的来说，你的初始实现思路是没问题的，只要根据页面间的交互情况做适当调整，再配合meta-reducer处理状态持久化，就能很好地满足需求啦～

内容的提问来源于stack exchange，提问作者Taranjit Kang