NgRx с массивом

export class Ingredient {
    public name: string;
    public amount: number;

    constructor(name: string, amount: number) {
        this.name = name;
        this.amount = amount;
    }
}

Мой массив:

export const initialState2: Ingredient[] = [
  new Ingredient('Apples', 5),
  new Ingredient('Lemons', 10),
  new Ingredient('Cherries', 15),
  new Ingredient('Tangerines', 20),
  new Ingredient('Apricots', 25)
];

Мое действие NgRx:

export const ADD_INGREDIENT2 = createAction(
    'ADD_INGREDIENT2',
    props<{ ingredient: Ingredient }>()
);

И мой Редуктор:

export const shoppingListReducer = createReducer(
  initialState2,
  on(
    ShoppingListActions.ADD_INGREDIENT2,
    (state, ingredient) => ({ ...state, ingredients: [...state, ingredient] })
  )
);

Я прохожу курс по Angular. Я хочу сделать с новой версией, новым синтаксисом то, что было сделано со старой версией, используя переключатель/регистр в этом курсе.

У меня есть массив и я хочу работать с NgRx. Я хочу показать элементы внутри массива, а затем добавить новый элемент в массив. но я потерпел неудачу. Я, наверное, ошибаюсь с некоторыми типами. И мой код внизу страницы **работает**, но мой код в новой версии не работает.

Код в курсе: работает отлично

export const initialState = {
  ingredients: [
    new Ingredient('Apples', 5),
    new Ingredient('Lemons', 10),
    new Ingredient('Cherries', 15),
    new Ingredient('Tangerines', 20),
    new Ingredient('Apricots', 25)
  ]
};
________________________________________________________
export const ADD_INGREDIENT = 'ADD_INGREDIENT';

export class AddIngredient implements Action {
    readonly type = ADD_INGREDIENT;
    payload: Ingredient;
}

export function shoppingListReducer(state = initialState, action: ShoppingListActions.AddIngredient) {

  switch (action.type) {
    case ShoppingListActions.ADD_INGREDIENT:
      return { ...state, ingredients: [...state.ingredients, action.payload] };
    default:
      return state;
  }
}