ngRx Store技术问题：Reducer返回undefined，store.select()获取值为undefined

看起来你的核心问题出在状态选择的路径错误上——这是NgRx新手最常踩的坑之一。结合你描述的现象（Devtools显示状态正常，但组件store.select()拿到undefined），咱们一步步来解决：

1. 先确认Reducer的注册方式 #

打开你的模块文件（AppModule或对应的feature模块），找到StoreModule的注册代码：

• 如果是根模块注册：

StoreModule.forRoot({ 
  // 这里的key（比如`products`）是关键！
  products: productReducer 
})

• 如果是feature模块注册：

StoreModule.forFeature('products', productReducer)

不管哪种方式，你的根状态AppState必须包含这个key，比如：

// 在app.state.ts（或单独的文件）里定义根状态类型
export interface AppState {
  products: ProductState; // 这里的key要和注册时的key完全一致
}

2. 修正组件中的状态选择路径 #

你现在在组件里直接用store.select(store => store.list)，但实际上list并不是根状态的直接属性——它是挂在你注册的key（比如products）下面的。所以要修改组件代码：

首先，把注入的Store类型改成Store<AppState>：

constructor(
  private keycloakService: KeycloakService, 
  private store: Store<AppState>, // 替换原来的Store<ProductState>
  private productService: ProductService
) { }

然后修正select的路径：

ngOnInit(): void {
  // ...其他代码
  this.items$ = this.store.select(store => store.products.list); // 加上products前缀
  this.loading$ = this.store.select(store => store.products.loading);
  this.error$ = this.store.select(store => store.products.error);
  // ...其他代码
}

3. 推荐使用类型安全的选择器（避免后续踩坑） #

手动写状态路径很容易出错，建议你创建类型安全的选择器，在product.reducer.ts里添加：

import { createFeatureSelector, createSelector } from '@ngrx/store';

// 获取整个ProductState的选择器
export const selectProductState = createFeatureSelector<ProductState>('products');

// 分别获取list、loading、error的选择器
export const selectProductList = createSelector(
  selectProductState,
  (state) => state.list
);

export const selectProductLoading = createSelector(
  selectProductState,
  (state) => state.loading
);

export const selectProductError = createSelector(
  selectProductState,
  (state) => state.error
);

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

this.items$ = this.store.select(selectProductList);
this.loading$ = this.store.select(selectProductLoading);
this.error$ = this.store.select(selectProductError);

额外验证步骤 #

• 打开Redux Devtools，查看根状态的结构：确认是否有products（或你注册的key）这个属性，里面包含list、loading、error
• 在reducer的每个return语句后添加日志，确认返回的状态对象是正确的：

case Products.LOAD_PRODUCT_SUCCESS:
  const updatedState = newState(state, {list: action.payload, loading: false, error: undefined});
  console.log('LOAD_PRODUCT_SUCCESS 新状态:', updatedState);
  return updatedState;

按照这个流程调整后，组件应该就能正确获取到Store里的状态了。

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