Initialize ngrx (Reduxe)

Create a store folder into that create shopping-list.reducer and shopping-list.actions ts files.

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

shopping-list.reducer.ts

import { Ingredient } from '../../shared/ingredient.model';
import * as ShoppingListActions from "./shopping-list.actions";

const initalState = {
    ingredients: [
        new Ingredient('Apples', 5),
        new Ingredient('Tomatoes', 10),
    ]
}
export function shoppingListReducer(state = initalState, action: ShoppingListActions.AddIngredient) {
    switch (action.type) {
        case ShoppingListActions.ADD_INGREDIENT:
            return {
                ...state,
                ingredients: [...state.ingredients, action.payload]
            }
        default:
            return state;
    }
}

Need to import in app.module.ts file now.

app.module.ts

import { StoreModule } from "@ngrx/store";
import { shoppingListReducer } from './shopping-list/store/shopping-list.reducer';

@NgModule({
  imports: [
    StoreModule.forRoot({ shoppingList: shoppingListReducer })
  ],
})
export class AppModule { }

Initialize is done now start with normal component

shopping-list.component.html

<a class="list-group-item" style="cursor: pointer" *ngFor="let ingredient of ingredients (ingredients | async).ingredients; let i = index" (click)="onEditItem(i)">
{{ ingredient.name }} ({{ ingredient.amount }})
</a>

shopping-list.component.ts

import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';

export class ShoppingListComponent implements OnInit, OnDestroy {
  ingredients: Observable<{ ingredients: Ingredient[] }>;

  constructor(
    private store: Store<{ shoppingList: { ingredients: Ingredient[] } }>
  ) { }

  ngOnInit() {
    this.ingredients = this.store.select('shoppingList');
    // this.ingredients = this.slService.getIngredients();
    // this.subscription = this.slService.ingredientsChanged.subscribe(
    //   (ingredients: Ingredient[]) => {
    //     this.ingredients = ingredients;
    //   }
    // );

  }

  ngOnDestroy() {
    // this.subscription.unsubscribe();
  }
}

You will see here your application is working same as before.