export class Ingredient {
public name: string;
public amount: number;
constructor(name: string, amount: number) {
this.name = name;
this.amount = amount;
}
}
List of Ingredients:
export const initialIngredients: Ingredient[] = [
new Ingredient('Apples', 5),
new Ingredient('Lemons', 10),
new Ingredient('Cherries', 15),
new Ingredient('Tangerines', 20),
new Ingredient('Apricots', 25)
];
Action in NgRx:
export const ADD_INGREDIENT_ACTION = createAction(
'ADD_INGREDIENT_ACTION',
props<{ ingredient: Ingredient }>()
);
Reducer Implementation:
export const ingredientsReducer = createReducer(
initialIngredients,
on(
ShoppingListActions.ADD_INGREDIENT2,
(state, ingredient) => ({ ...state, ingredients: [...state, ingredient] })
)
);
I'm currently enrolled in an Angular course and experimenting with the latest version for efficiency. I encountered a hurdle while trying to use NgRx for managing state as per my array contents.
My goal is to display the existing elements in the array and seamlessly add new ones but it seems like there's a glitch in my implementation regarding types.
The code snippet below illustrates how the task was accomplished in the previous course using switch/case logic which worked flawlessly.
Code from Previous Course: executed without any issues
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;
}
}