NGRX Store问题：无法获取值且跨组件状态更新无响应

核心问题1：Store状态路径不匹配 #

你在app.module.ts中注册Reducer时使用了StoreModule.forRoot({ root: emailReducer })，这意味着你的EmailState被嵌套在全局Store的root属性下，但组件中直接通过store.select('chipSelected')查找状态，自然找不到对应值。

核心问题2：类型不匹配（潜在隐患） #

email.actions.ts中Action的chipSelected类型定义为string，但EmailState中该字段是字面量类型'oldValue' | 'newValue'，类型不匹配可能导致隐性错误。

核心问题3：Redux Devtools未配置 #

你没在模块中导入并配置StoreDevtoolsModule，所以无法在Devtools中看到动作触发记录。

具体修复步骤 #

1. 定义全局AppState接口

创建app.state.ts（或在email.state.ts中补充）：

import { EmailState } from './email.state';

export interface AppState {
  root: EmailState;
}

2. 修复AA组件的状态选择逻辑

修改AA.component.ts：

import { Store } from '@ngrx/store';
import { AppState } from '../app.state'; // 路径根据实际结构调整
import { Observable } from 'rxjs';

// ...
chipSelected$: Observable<string>;

constructor(
  public emailService: EmailService,
  private store: Store<AppState>
) {
  // 方式1：直接通过路径选择
  this.chipSelected$ = this.store.select(state => state.root.chipSelected);

  // 方式2：使用Selector（更规范，推荐）
  // this.chipSelected$ = this.store.select(selectChipSelected);
}

3. 修复Action的类型定义

修改email.actions.ts：

import { createAction, props } from '@ngrx/store';
import { EmailState } from './email.state';

export const changeChip = createAction(
  '[Email component] change chip selection',
  props<{ chipSelected: EmailState['chipSelected'] }>()
);

4. 配置Redux Devtools

修改app.module.ts，添加StoreDevtoolsModule的导入和配置：

import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { emailReducer } from './path-to-email-reducer'; // 路径根据实际结构调整

@NgModule({
  imports: [
    // ...其他模块
    StoreModule.forRoot({ root: emailReducer }, {
      runtimeChecks: {
        strictStateImmutability: true,
        strictActionImmutability: true,
      }
    }),
    // 配置Devtools，maxAge表示保留最近25条记录
    StoreDevtoolsModule.instrument({ maxAge: 25 })
  ],
  // ...其他配置
})
export class AppModule { }

5. 可选：创建规范的Selector（推荐）

创建email.selectors.ts：

import { createSelector } from '@ngrx/store';
import { AppState } from './app.state';
import { EmailState } from './email.state';

// 先选择整个EmailState
const selectEmailState = (state: AppState) => state.root;

// 再选择具体字段
export const selectChipSelected = createSelector(
  selectEmailState,
  (state: EmailState) => state.chipSelected
);

之后在AA组件中使用：

import { selectChipSelected } from '../email.selectors';

// ...
constructor(private store: Store<AppState>) {
  this.chipSelected$ = this.store.select(selectChipSelected);
}

验证修复 #

1. 启动应用后，AA组件应显示初始值oldValue
2. 点击BB组件的按钮，控制台打印button clicked!，同时AA组件的显示值更新为newValue
3. 打开Redux Devtools，可以看到[Email component] change chip selection动作被触发，状态更新记录正常

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