NgRx With Array-CodePudding

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

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

My Array:

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

My NgRx Action:

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

and my Reducer:

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

I'm following a course about Angular. I want to do with the new version, new syntax what was done with the old version using switch/case in that course.

I have an array and I want to work NgRx.
I want to show the elements inside the array and then add new element to the array.
but I failed. I'm probably making a mistake with some types.
And my code at the bottom of the page is **working **but my code in the new version is not working.

Code in the course: works perfectly

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;
  }
}

CodePudding user response：

In your NgRx Reducer you should use destructuring assignment to unpack ingredient property and add it to the ingredients array with:

ingredients: [...state.ingredients, ingredient]

Reducer code:

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