Ngrx学习项目中TS2322错误：Action类型缺少payload属性导致与AddIngredient类型不兼容的解决方法问询

问题根源剖析 #

你碰到的这个类型错误，核心原因是Reducer的action参数类型定义得太窄了。StoreModule.forRoot()要求reducer能处理NgRx标准的Action类型（以及它的所有扩展类型），但你当前的shoppingListReducer只接受AddIngredient这一种特定的Action。而NgRx在运行过程中，会发送各种类型的Action（比如应用初始化时的内部Action），你的reducer没法处理这些非AddIngredient的Action，自然就触发了类型不兼容的报错。另外，你的reducer还缺少了默认分支，这也是NgRx reducer的强制要求——必须处理所有未匹配到的Action，返回原状态。

分步解决方案 #

咱们来一步步调整代码，解决这个问题：

1. 定义Action联合类型 #

先在你的shopping-list.actions.ts里，导出一个包含所有ShoppingList相关Action的联合类型，让reducer能识别所有可能的Action：

import { Action } from "@ngrx/store";
import { Ingredient } from "src/app/shared/ingredient.model";

export const ADD_INGREDIENT = 'ADD-INGREDIENT';

export class AddIngredient implements Action {
  readonly type = ADD_INGREDIENT;
  // 用构造函数初始化payload，避免!断言带来的潜在undefined风险
  constructor(public payload: Ingredient) {}
}

// 导出所有ShoppingList Action的联合类型
export type ShoppingListActions = AddIngredient;

2. 更新Reducer的Action参数类型 #

修改shopping-list.reducer.ts，把action参数的类型改成刚才定义的联合类型，同时补上默认分支：

import * as ShoppingListActions from './shopping-list.actions'
import { Ingredient } from '../../shared/ingredient.model';

const initialState = {
  ingredients: [
    new Ingredient('Apples', 5),
    new Ingredient('Tomatoes', 10),
  ]
};

// 将action参数类型改为联合类型ShoppingListActions
export function shoppingListReducer(
  state = initialState, 
  action: ShoppingListActions.ShoppingListActions
) {
  switch (action.type) {
    case ShoppingListActions.ADD_INGREDIENT:
      return {
        ...state,
        ingredients: [...state.ingredients, action.payload]
      };
    // 必须添加默认分支，处理未匹配的Action（比如NgRx内部初始化Action）
    default:
      return state;
  }
}

3. 确认AppModule配置 #

你的AppModule里的StoreModule.forRoot配置是正确的，不需要修改，现在reducer的类型已经能匹配ActionReducer的要求了：

StoreModule.forRoot({shoppingList: shoppingListReducer})

为什么这样修改有效？ #

• 联合类型的作用：ShoppingListActions联合类型让reducer明确知道它可能接收的所有Action类型，既兼容你自定义的AddIngredient，也能处理NgRx的基础Action类型，解决了类型不兼容的问题。
• 默认分支的必要性：当NgRx发送未匹配到的Action时，reducer会返回原状态，避免出现状态未定义的异常，符合NgRx的状态管理规范。
• 构造函数初始化payload：代替!断言让payload的类型更安全，避免运行时可能出现的undefined问题。

这样调整后，你遇到的类型错误就会消失，NgRx的状态管理也能正常运行了。

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