非懒加载模块中如何使用NgRx的forFeature实现独立Reducer？

嘿，我刚好在项目里频繁用到NgRx的StoreModule.forFeature()来给非懒加载模块拆分Reducer，给你一步步讲清楚正确的用法：

每个非懒加载模块都需要有自己独立的状态结构和处理逻辑，先从定义State接口和初始化状态开始：

// 比如在users模块下的users.state.ts
export interface UsersState {
  userList: User[];
  isLoading: boolean;
  errorMsg: string | null;
}

// 初始化状态
export const initialUsersState: UsersState = {
  userList: [],
  isLoading: false,
  errorMsg: null
};

接着写对应的Reducer函数，用NgRx的createReducer和on来绑定动作和状态变更：

// users.reducer.ts
import { createReducer, on } from '@ngrx/store';
import * as UsersActions from './users.actions';
import { initialUsersState, UsersState } from './users.state';

export const usersReducer = createReducer(
  initialUsersState,
  // 处理加载用户的动作
  on(UsersActions.fetchUsers, state => ({ ...state, isLoading: true })),
  // 处理加载成功的动作
  on(UsersActions.fetchUsersSuccess, (state, { users }) => ({
    ...state,
    isLoading: false,
    userList: users,
    errorMsg: null
  })),
  // 处理加载失败的动作
  on(UsersActions.fetchUsersFailure, (state, { error }) => ({
    ...state,
    isLoading: false,
    errorMsg: error
  }))
);

打开你的非懒加载模块（比如UsersModule），在imports数组里用StoreModule.forFeature()注册刚才写的Reducer。这里要注意三个参数：

• 第一个参数是唯一的feature key（比如'users'），全局不能重复，否则会覆盖其他模块的状态
• 第二个参数是当前模块的Reducer
• 第三个参数是可选的metaReducers，只作用于当前feature的状态

// users.module.ts
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { usersReducer } from './users.reducer';
// 如果有专属的metaReducers可以导入
// import { usersMetaReducers } from './users.meta-reducers';

@NgModule({
  imports: [
    // 其他必要模块（比如CommonModule、UsersRoutingModule等）
    StoreModule.forFeature('users', usersReducer, { 
      // metaReducers: usersMetaReducers  // 可选，按需添加
    })
  ],
  declarations: [/* 模块内的组件 */],
  providers: [/* 模块内的服务 */]
})
export class UsersModule { }

别忘了在根模块AppModule里先导入StoreModule.forRoot()来初始化全局Store，哪怕你没有全局Reducer也要写（传入空对象即可），然后再导入所有非懒加载的feature模块：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { UsersModule } from './users/users.module';
import { ProductsModule } from './products/products.module'; // 另一个非懒加载模块

@NgModule({
  imports: [
    BrowserModule,
    // 初始化全局Store，开启运行时检查保证状态不可变
    StoreModule.forRoot({}, {
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true
      }
    }),
    // 导入所有非懒加载的feature模块
    UsersModule,
    ProductsModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

要在组件或服务里获取这个模块的状态，推荐用NgRx的createFeatureSelector和createSelector来做类型安全的选择器：

// users.selectors.ts
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { UsersState } from './users.state';

// 获取整个users模块的状态
export const selectUsersState = createFeatureSelector<UsersState>('users');

// 派生具体的状态片段
export const selectUserList = createSelector(
  selectUsersState,
  (state: UsersState) => state.userList
);

export const selectUsersLoading = createSelector(
  selectUsersState,
  state => state.isLoading
);

export const selectUsersError = createSelector(
  selectUsersState,
  state => state.errorMsg
);

然后在组件里使用这些选择器：

// users.component.ts
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { selectUserList, selectUsersLoading, selectUsersError } from './users.selectors';
import * as UsersActions from './users.actions';

@Component({
  selector: 'app-users',
  template: `
    <div *ngIf="isLoading$ | async" class="loading">加载中...</div>
    <div *ngIf="errorMsg$ | async as error" class="error">{{ error }}</div>
    <ul *ngIf="userList$ | async as users">
      <li *ngFor="let user of users">{{ user.name }}</li>
    </ul>
  `
})
export class UsersComponent implements OnInit {
  userList$: Observable<User[]> = this.store.select(selectUserList);
  isLoading$: Observable<boolean> = this.store.select(selectUsersLoading);
  errorMsg$: Observable<string | null> = this.store.select(selectUsersError);

  constructor(private store: Store) {}

  ngOnInit(): void {
    // 触发加载用户的动作
    this.store.dispatch(UsersActions.fetchUsers());
  }
}

• 全局唯一的Feature Key：每个模块的feature key必须独一无二，比如用户模块用'users'，产品模块用'products'，不然会导致状态覆盖，出现难以排查的bug。
• MetaReducers的作用域：通过forFeature传入的metaReducers只会影响当前模块的状态，而根Store的metaReducers会作用于所有模块的状态，按需选择。
• 非懒加载模块的导入顺序：根模块里要先导入StoreModule.forRoot()，再导入各个feature模块，这样feature的Reducer才能正确注册到全局Store中。
• 类型安全优先：始终用createFeatureSelector来获取模块状态，避免手动类型断言，减少类型错误。

内容的提问来源于stack exchange，提问作者Maks K