NgRx新版本数组操作失效问题：旧版switch/case代码正常

1. 动作(Action)的类型定义是否准确 #

新版本使用createAction时，必须明确指定负载(payload)的类型与Ingredient类匹配，否则会导致reducer无法正确识别传入的元素：

// 错误写法：未指定payload类型
export const addIngredient2 = createAction('[Shopping List] Add Ingredient');

// 正确写法：通过props明确payload类型
export const addIngredient2 = createAction(
  '[Shopping List] Add Ingredient',
  props<{ ingredient: Ingredient }>()
);

2. 初始状态(initialState2)的类型声明是否显式 #

依赖TypeScript自动推断状态类型容易出问题，必须显式声明为Ingredient[]：

// 错误写法：依赖类型推断
export const initialState2 = [
  new Ingredient('Apples', 5),
  new Ingredient('Tomatoes', 10)
];

// 正确写法：明确指定数组类型
export const initialState2: Ingredient[] = [
  new Ingredient('Apples', 5),
  new Ingredient('Tomatoes', 10)
];

3. Reducer的状态更新是否符合不可变性要求 #

NgRx要求状态更新必须返回新对象，直接修改原数组会导致状态不触发变化，同时要确保正确解构动作的payload：

// 错误写法：直接修改原数组，违反不可变性
export const shoppingListReducer = createReducer(
  initialState2,
  on(addIngredient2, (state, action) => {
    state.push(action.ingredient);
    return state;
  })
);

// 正确写法：返回新数组，正确获取payload
export const shoppingListReducer = createReducer(
  initialState2,
  on(addIngredient2, (state, { ingredient }) => [...state, ingredient])
);

4. 选择器(Selector)与Store配置是否匹配 #

组件中使用的选择器必须正确关联reducer的状态，同时模块中要正确注册reducer：

// 定义选择器
export const selectShoppingListState = createFeatureSelector<Ingredient[]>('shoppingList');
export const selectAllIngredients = createSelector(
  selectShoppingListState,
  (state) => state
);

// 组件内订阅状态
ingredients$ = this.store.select(selectAllIngredients);

模块注册示例：

@NgModule({
  imports: [
    StoreModule.forRoot({
      shoppingList: shoppingListReducer // 键名需与选择器中的feature名称一致
    })
  ]
})
export class AppModule {}

如果以上步骤排查后仍有问题，建议贴出动作定义、reducer逻辑和组件订阅的完整代码片段，重点检查类型匹配和不可变性处理这两个核心点——这也是新版本语法和旧版switch/case最容易出现差异的地方。

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