I've been following a tutorial to learn Angular with ngrx and I'm having trouble with my action file.
Here is how my action file looks:
import { Action } from '@ngrx/store';
import { Ingredient } from 'src/app/shared/ingredient.model';
export const ADD_INGREDIENT = 'ADD_INGREDIENT';
export const ADD_INGREDIENTS = 'ADD_INGREDIENTS';
export const UPDATE_INGREDIENT = 'UPDATE_INGREDIENT';
export const DELETE_INGREDIENT = 'DELETE_INGREDIENT';
interface IUpdatePayload {
index: number;
ingredient: Ingredient
}
export class AddIngredient implements Action {
readonly type: string = ADD_INGREDIENT;
constructor(public payload: Ingredient) {}
}
export class AddIngredients implements Action {
readonly type: string = ADD_INGREDIENTS;
constructor(public payload: Ingredient[]) {}
}
export class UpdateIngredient implements Action {
readonly type: string = UPDATE_INGREDIENT;
constructor(public payload: {index: number, ingredient: Ingredient}) {}
}
export class DeleteIngredient implements Action {
readonly type: string = DELETE_INGREDIENT;
constructor(public payload: number) {}
}
export type ShoppingListActions =
AddIngredient |
AddIngredients |
UpdateIngredient |
DeleteIngredient;
The reducer file is structured like this:
import { Ingredient } from '../../shared/ingredient.model';
import * as ShoppingListActions from './shopping-list.actions';
const initialState = {
ingredients: [
new Ingredient('Apples', 5),
new Ingredient('Tomatoes', 10),
]
};
export function shoppingListReducer(
state = initialState,
action: ShoppingListActions.ShoppingListActions
) {
switch (action.type) {
case ShoppingListActions.ADD_INGREDIENT:
return {
...state,
ingredients: [...state.ingredients, action.payload]
};
case ShoppingListActions.ADD_INGREDIENTS:
return {
...state,
ingredients: [...state.ingredients, ...action.payload]
}
case ShoppingListActions.UPDATE_INGREDIENT:
const ingredient = state.ingredients[action.payload.index];
const updatedIngredient = {
...ingredient,
...action.payload.ingredient
}
return {
...state,
ingredients: [...state.ingredients]
};
case ShoppingListActions.DELETE_INGREDIENT:
return {};
default: return state
}
}
I encountered an error in the line
case ShoppingListActions.UPDATE_INGREDIENT:Property 'index' does not exist on type 'Ingredient | { index: number; ingredient: Ingredient; }'.
Property 'index' does not exist on type 'Ingredient'.I'm unsure of what I might be doing wrong. Any assistance would be greatly appreciated. Thank you