NgRx状态返回undefined，懒加载后用户列表无法显示

路由改为懒加载后，用户列表无法显示。Redux DevTools中能看到正确的状态和用户列表，但组件中的loaded$和users$始终为undefined。

核心问题与修复方案 #

1. 重复定义Action类型 #

Actions文件中存在重复的Action类型字符串，导致Reducer无法正确处理状态更新：

// 第一个正确的批量加载成功Action
export const loadUsersSuccess = createAction(
  '[User] Load Users Success',
  props<{ users: User[] }>()
);

// 重复的类型字符串，覆盖了上面的定义
export const loadUserSuccess = createAction(
  '[User] Load Users Success',
  props<{ user: User }>()
);

修复：修改第二个Action的类型标识，确保唯一：

export const loadUserSuccess = createAction(
  '[User] Load User Success',
  props<{ user: User }>()
);

2. 根模块Store配置错误 #

AppModule中StoreModule.forRoot(userReducers)的配置有误，懒加载的feature状态不需要在根模块注册对应的reducer：

// AppModule中的错误配置
StoreModule.forRoot(userReducers),

// 修复为：如果没有根级自定义reducer，传入空对象
StoreModule.forRoot({}),

3. 模板逻辑反转 #

HTML模板中错误的判断逻辑导致用户列表无法渲染：

<!-- 错误逻辑：error为true时显示错误，否则显示错误模板 -->
<ng-container *ngIf="error$ | async; else usersListError">
  <div>An error occurred while loading users.</div>
</ng-container>
<ng-container *ngIf="!(error$ | async)">
  <!-- 用户列表 -->
</ng-container>

修复：调整逻辑，正常状态下显示用户列表，错误时显示错误模板：

<ng-container *ngIf="loaded$ | async; else loading">
  <!-- 错误状态显示错误提示 -->
  <ng-container *ngIf="error$ | async; else usersList">
    <div>An error occurred while loading users.</div>
  </ng-container>
  <!-- 正常状态显示用户列表 -->
  <ng-template #usersList>
    <mat-list role="list">
      <mat-list-item *ngFor="let user of users$ | async" [routerLink]="['detail', user.id]">
        {{user.name}}
      </mat-list-item>
    </mat-list>
  </ng-template>
</ng-container>

<ng-template #loading>
  <mat-progress-bar mode="indeterminate"></mat-progress-bar>
</ng-template>

<ng-template #usersListError>
  <div>Unable to load users. Please try again later.</div>
</ng-template>

4. 验证Feature状态路径一致性 #

确保StoreModule.forFeature('user', reducers)中的'user'与Selector中selectUserState的路径完全匹配：

// Selector中的状态路径
export const selectUserState = (state: AppState) => state.user;

// UsersModule中的Feature注册
StoreModule.forFeature('user', reducers),

两者的'user'必须完全一致，否则Selector无法正确获取feature状态。

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