ngrx for update & delete

src/app/shopping-list/shopping-edit/shopping-edit.component.ts

@@ -29,17 +29,32 @@ export class ShoppingEditComponent implements OnInit, OnDestroy {
     private store: Store<fromShoppingList.AppState>) { }
 
   ngOnInit() {
-    this.ingSubscription = this.slServ.selectedIngIndex.subscribe(
-      (index: number)=>{
+    this.ingSubscription = this.store.select('shoppingList').subscribe(stateData =>{
+      if(stateData.editedIgIndex > -1){
         this.editMode = true;
-        this.ingredientID = index;
-        this.selectedIngr = this.slServ.getIngredient(this.ingredientID);
+        this.selectedIngr = stateData.editedIg;
+        this.ingredientID = stateData.editedIgIndex;
         this.slForm.setValue({
           name: this.selectedIngr.name,
           amount: this.selectedIngr.amount
         });
+      }else
+      {
+        this.editMode = false;
       }
-    );
+    });
+
+    // this.ingSubscription = this.slServ.selectedIngIndex.subscribe(
+    //   (index: number)=>{
+    //     this.editMode = true;
+    //     this.ingredientID = index;
+    //     this.selectedIngr = this.slServ.getIngredient(this.ingredientID);
+    //     this.slForm.setValue({
+    //       name: this.selectedIngr.name,
+    //       amount: this.selectedIngr.amount
+    //     });
+    //   }
+    // );
   }
 
   onSubmit(form: NgForm) {
@@ -62,6 +77,7 @@ export class ShoppingEditComponent implements OnInit, OnDestroy {
   onClear(){
     this.slForm.reset();
     this.editMode = false;
+    this.store.dispatch(new ShoppingListAction.StopEdit);
   }
 
   onDelete(){
@@ -74,5 +90,6 @@ export class ShoppingEditComponent implements OnInit, OnDestroy {
 
   ngOnDestroy(){
     this.ingSubscription.unsubscribe();
+    this.store.dispatch(new ShoppingListAction.StopEdit);
   }
 }

src/app/shopping-list/shopping-list.component.ts

@@ -5,6 +5,7 @@ import { Store } from '@ngrx/store';
 import { Ingredient } from '../models/ingredient.model';
 import { ShoppingListService } from '../services/shopping-list.service';
 import * as fromShoppingList from 'src/app/store/shoppin-list/shopping-list.reducer';
+import * as ShoppingListAction from 'src/app/store/shoppin-list/shopping-list.actions';
 
 @Component({
   selector: 'app-shopping-list',
@@ -34,7 +35,8 @@ export class ShoppingListComponent implements OnInit, OnDestroy {
   }
 
   onEditIngredients(index: number){
-    this.slServ.selectedIngIndex.next(index);
+    // this.slServ.selectedIngIndex.next(index);
+    this.store.dispatch(new ShoppingListAction.StartEdit(index));
   }
 
   ngOnDestroy(){

src/app/store/shoppin-list/shopping-list.actions.ts

@@ -5,6 +5,8 @@ export const ADD_INGREDIENT = 'ADD_INGREDIENT';
 export const ADD_INGREDIENTS = 'ADD_INGREDIENTS';
 export const UPDATE_INGREDIENT = 'UPDATE_INGREDIENT';
 export const DELETE_INGREDIENT = 'DELETE_INGREDIENT';
+export const START_EDIT = 'START_EDIT';
+export const STOP_EDIT = 'STOP_EDIT';
 
 export class AddIngredient implements Action {
 
@@ -30,4 +32,14 @@ export class DeleteIngredient implements Action {
     constructor(public payload: number){}
 }
 
-export type ShoppingListType = AddIngredient | AddIngredients | DeleteIngredient | UpdateIngredients;
+export class StartEdit implements Action {
+    readonly type = START_EDIT;
+    constructor(public payload: number){}
+}
+
+export class StopEdit implements Action {
+    readonly type = STOP_EDIT;
+}
+
+export type ShoppingListType = AddIngredient | AddIngredients | 
+DeleteIngredient | UpdateIngredients | StartEdit | StopEdit;

src/app/store/shoppin-list/shopping-list.reducer.ts

@@ -23,7 +23,7 @@ const initialState: State = {
       editedIgIndex: -1
 };
 
-export function shoppingListReducer(state = initialState, 
+export function shoppingListReducer(state:State = initialState, 
     action: ShoppingListAction.ShoppingListType){
 
     switch(action.type){
@@ -61,6 +61,21 @@ export function shoppingListReducer(state = initialState,
                     return igIndex != action.payload; //allowing all values that doesnt match the index
                 })
             };
+
+        case ShoppingListAction.START_EDIT:
+            return{
+                ...state,
+                editedIg: {...state.ingredients[action.payload]},
+                editedIgIndex: action.payload
+            };
+
+        case ShoppingListAction.STOP_EDIT:
+            return{
+                ...state,
+                editedIg: null,
+                editedIgIndex: -1
+            };
+
         default:
             return state;