如何为Angular应用构建嵌套式NgRx Store子Feature层级结构？

首先明确：不需要在dashboard模块中使用StoreModule.forRoot()——forRoot()只能在根模块（app.module.ts）调用一次，用来初始化全局Store，子模块使用它会导致重复初始化的错误。你要的嵌套状态树，完全可以通过StoreModule.forFeature()的嵌套特性键来实现。

核心实现思路 #

NgRx允许通过点分隔的路径字符串作为forFeature()的feature key，来定义嵌套的状态层级。比如你想把subFeature1挂载到dashboard1下面，只需要给子Feature注册时使用dashboard1.subFeature1作为键即可，NgRx会自动帮你构建嵌套的状态树。

具体步骤和代码示例 #

1. 保持Dashboard模块的Feature注册不变

比如dashboard1.module.ts里，依然用顶层键注册dashboard的reducer，这会在根状态下创建dashboard1节点：

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { dashboard1Reducer } from './state/dashboard1.reducer';

@NgModule({
  imports: [
    StoreModule.forFeature('dashboard1', dashboard1Reducer)
  ]
})
export class Dashboard1Module { }

2. 子Feature使用嵌套键注册

以subFeature1.module.ts为例，注册时使用dashboard1.subFeature1作为feature key，这样它的状态就会被挂载到dashboard1节点下：

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { subFeature1Reducer } from './state/subFeature1.reducer';

@NgModule({
  imports: [
    StoreModule.forFeature('dashboard1.subFeature1', subFeature1Reducer)
  ]
})
export class SubFeature1Module { }

3. 最终的状态树结构

这样配置后，Redux DevTools里的状态树就会变成你想要的嵌套结构：

{
  // app根状态（来自StoreModule.forRoot()的reducers）
  ...,
  dashboard1: {
    // dashboard1自身的状态字段
    dashboardTitle: 'My Dashboard',
    // 嵌套的子Feature状态
    subFeature1: {
      subTitle: 'Sub Feature 1',
      data: [...]
    },
    subFeature2: {
      ...
    }
  },
  dashboard2: {
    subFeature1: { ... },
    subFeature2: { ... }
  }
}

最佳实践：用常量管理嵌套键 #

为了避免拼写错误，建议把feature key定义成可复用的常量：

// dashboard1/state/dashboard1.constants.ts
export const DASHBOARD1_FEATURE_KEY = 'dashboard1';

// subFeature1/state/subFeature1.constants.ts
import { DASHBOARD1_FEATURE_KEY } from '../../dashboard1/state/dashboard1.constants';
export const SUB_FEATURE1_KEY = `${DASHBOARD1_FEATURE_KEY}.subFeature1`;

然后在模块里使用常量：

StoreModule.forFeature(SUB_FEATURE1_KEY, subFeature1Reducer)

进阶：使用NgRx的createFeature（NgRx 14+） #

如果你的NgRx版本在14及以上，推荐使用createFeature函数来更规范地创建特性，它会自动帮你管理feature key和对应的选择器：

// dashboard1/state/dashboard1.state.ts
import { createFeature, createReducer } from '@ngrx/store';

const dashboard1Reducer = createReducer(
  // 初始状态
  { dashboardTitle: 'My Dashboard' }
);

export const dashboard1Feature = createFeature({
  name: 'dashboard1',
  reducer: dashboard1Reducer,
});

// 自动生成的选择器，比如 dashboard1Feature.selectDashboardTitle

// subFeature1/state/subFeature1.state.ts
import { createFeature, createReducer } from '@ngrx/store';
import { dashboard1Feature } from '../../dashboard1/state/dashboard1.state';

const subFeature1Reducer = createReducer(
  { subTitle: 'Sub Feature 1' }
);

export const subFeature1Feature = createFeature({
  name: `${dashboard1Feature.name}.subFeature1`,
  reducer: subFeature1Reducer,
});

然后模块里直接传入feature对象即可：

StoreModule.forFeature(subFeature1Feature)

集成注意事项 #

• 所有子Feature模块依然正常导入到对应的Dashboard模块中，Dashboard模块再导入到App模块，NgRx会自动根据feature key的路径完成嵌套挂载。
• 不要在任何子模块中使用StoreModule.forRoot()，这会破坏全局Store的单一性，引发不可预期的错误。

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