Angular 8多项目添加StoreModule.forFeature后无法访问存储数据

一、先修复StoreModule的核心配置错误 #

你当前的问题根源之一是重复调用StoreModule.forRoot({})——forRoot是用来初始化全局Store的，整个应用只能调用一次！每个子项目应该作为独立的Feature Store来注册，正确的配置方式如下：

1. 主应用根模块（app.module.ts）：只初始化一次全局Store

imports: [
  // 仅在根模块调用一次forRoot，初始化全局Store
  StoreModule.forRoot({}),
  // 其他全局模块...
]

2. 子项目模块（比如project1.module.ts）：用forFeature注册专属的Feature Store

imports: [
  // 注册子项目1的Feature Store，key为"project1"（自定义唯一标识）
  StoreModule.forFeature("project1", fromStore.reducer1),
  // 子项目1的其他模块...
]

3. 子项目2模块（project2.module.ts）：同理注册自己的Feature Store

imports: [
  StoreModule.forFeature("project2", fromStore.reducer2),
  // 子项目2的其他模块...
]

这样全局Store的结构会变成清晰的多Feature结构：

{
  project1: { /* reducer1管理的状态 */ },
  project2: { /* reducer2管理的状态 */ }
}

二、修正Selector与状态类型的匹配问题 #

你之前的Selector错误在于：createFeatureSelector已经帮你定位到了对应Feature的状态节点，不需要再重复访问state.app1。以下是正确的写法：

1. 定义子项目专属的状态类型（以子项目1为例）

// project1/store/models/project1.state.ts
export interface Project1State {
  // 匹配你的reducer输出结构
  site: SiteModel | null;
  error: string | null;
}

// 初始状态要和类型完全匹配
export const initialProject1State: Project1State = {
  site: null,
  error: null
};

2. 编写正确的Selector

// project1/store/selectors/site.selectors.ts
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { Project1State } from '../models/project1.state';

// 第一步：获取子项目1的整个状态节点
export const selectProject1State = createFeatureSelector<Project1State>('project1');

// 第二步：提取具体的site数据
export const selectSite = createSelector(
  selectProject1State,
  // 这里的state就是Project1State类型，直接访问属性即可
  (state: Project1State) => state.site
);

// 同理提取error信息
export const selectSiteError = createSelector(
  selectProject1State,
  (state: Project1State) => state.error
);

3. 在组件中使用Selector

现在可以直接用定义好的Selector，无需手动拼接路径：

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { selectSite } from './store/selectors/site.selectors';

@Component({
  selector: 'app-project1-site',
  templateUrl: './site.component.html'
})
export class SiteComponent {
  // 直接订阅Selector
  site$ = this.store.select(selectSite);

  constructor(private store: Store) {}
}

三、解释你之前的错误点 #

1. 重复调用forRoot：导致Store初始化混乱，DevTools能看到数据但Selector无法正确定位节点。
2. Selector重复访问Feature Key：createFeatureSelector('project1')已经返回了project1对应的状态对象，你不需要再写state.project1.siteReducer——这会导致TypeScript报错，因为此时的state就是project1的状态，没有额外的project1属性。
3. 状态类型与Reducer不匹配：你之前修改状态模型后出现嵌套问题，是因为Reducer的输出结构和状态类型定义不一致，必须保证两者完全对齐。

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