Dispatching Action in NgRx

We will start with add item

shopping-edit.component.ts

import { Store } from '@ngrx/store';
import * as ShoppingListActions from '../store/shopping-list.actions'

export class ShoppingEditComponent implements OnInit, OnDestroy {
  constructor(private slService: ShoppingListService, private store: Store<{ shoppingList: { ingredients: Ingredient[] } }>) { }

  onSubmit(form: NgForm) {
    const value = form.value;
    const newIngredient = new Ingredient(value.name, value.amount);
    if (this.editMode) {
      this.slService.updateIngredient(this.editedItemIndex, newIngredient);
    } else {
      this.slService.addIngredient(newIngredient);
      this.store.dispatch(new ShoppingListActions.AddIngredient(newIngredient));
    }
    this.editMode = false;
    form.reset();
  }

}

shopping-list.actions.ts

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: Ingredient;
    constructor(public payload: Ingredient) { }
}

The item functionallity will be work same as before