Angular NgRx中Store值丢失：访问words键返回undefined

以下是几种常见的原因和对应的解决方向：

• 状态被Feature切片嵌套
  NgRx通常会通过StoreModule.forFeature拆分状态模块，你的words很可能嵌套在某个feature节点下。比如如果注册feature时用的key是wordFeature，那实际访问路径应该是store.wordFeature.words，而非直接store.words。可以在控制台展开Store对象，确认words的实际层级结构。

• 状态未完成异步初始化
  如果words是通过API请求等异步操作加载的，第一次订阅Store时，异步任务可能还未完成，words还未被赋值，因此返回undefined。可以检查reducer的初始状态是否给words设置了默认值（比如空数组[]），或者改用select操作符监听特定状态，避免订阅整个Store。

• 键名拼写/大小写错误
  确认reducer中定义的状态键是words，而非类似wordList、Words（大小写错误）这类近似名称，拼写错误会直接导致属性无法访问。

• 错误使用NgRx Feature API
  若使用了createFeature创建feature模块，状态会被包裹在feature的name字段对应的节点下。例如：

  export const wordsFeature = createFeature({
    name: 'wordState',
    reducer: wordsReducer,
  });
  

  此时words的访问路径应为store.wordState.words（假设reducer的状态结构包含words属性）。

推荐做法：使用Selector访问状态 #

NgRx官方推荐用selectors来获取特定状态，避免直接订阅整个Store，同时能自动处理状态更新和路径问题：

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

// 先获取feature状态
const selectWordFeature = createFeatureSelector<WordState>('wordState');
// 再获取words属性
export const selectWords = createSelector(
  selectWordFeature,
  (state) => state.words
);

// 组件中使用
this.store.select(selectWords).subscribe(words => {
  console.log('Words:', words);
});

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