From 7aa097ca070403bc4026c95654fb7dbe43a128fa Mon Sep 17 00:00:00 2001 From: Nils Dittberner Date: Wed, 29 Nov 2017 09:57:25 +0100 Subject: [PATCH] 24-307 Setting state with actions --- src/app/shopping-list/ngrx/shopping-list.actions.ts | 3 ++- .../shopping-edit/shopping-edit.component.ts | 7 +++++-- src/app/shopping-list/shopping-list.component.ts | 15 ++------------- src/app/shopping-list/shopping-list.service.ts | 9 --------- 4 files changed, 9 insertions(+), 25 deletions(-) diff --git a/src/app/shopping-list/ngrx/shopping-list.actions.ts b/src/app/shopping-list/ngrx/shopping-list.actions.ts index 2bf81d7..d755ecc 100644 --- a/src/app/shopping-list/ngrx/shopping-list.actions.ts +++ b/src/app/shopping-list/ngrx/shopping-list.actions.ts @@ -6,7 +6,8 @@ export const ADD_INGREDIENT = 'ADD_INGREDIENT'; export class AddIngredient implements Action { readonly type = ADD_INGREDIENT; - payload: Ingredient; + + constructor(public payload: Ingredient) {} } export type ShoppingListActions = AddIngredient; \ No newline at end of file diff --git a/src/app/shopping-list/shopping-edit/shopping-edit.component.ts b/src/app/shopping-list/shopping-edit/shopping-edit.component.ts index 645bb70..240161b 100644 --- a/src/app/shopping-list/shopping-edit/shopping-edit.component.ts +++ b/src/app/shopping-list/shopping-edit/shopping-edit.component.ts @@ -1,9 +1,11 @@ import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; import { NgForm } from '@angular/forms'; import { Subscription } from 'rxjs/Subscription'; +import { Store } from '@ngrx/store'; import { Ingredient } from '../../shared/ingredient.model'; import { ShoppingListService } from '../shopping-list.service'; +import * as ShoppingListActions from '../ngrx/shopping-list.actions'; @Component({ selector: 'app-shopping-edit', @@ -17,7 +19,8 @@ export class ShoppingEditComponent implements OnInit, OnDestroy { editedItemIndex: number; editedItem: Ingredient; - constructor(private shoppingListService: ShoppingListService) { } + constructor(private shoppingListService: ShoppingListService, + private store: Store<{shoppingList: {ingredients: Ingredient[]}}>) { } ngOnInit() { this.subscription = this.shoppingListService.startedEditing.subscribe( @@ -39,7 +42,7 @@ export class ShoppingEditComponent implements OnInit, OnDestroy { if (this.editMode) { this.shoppingListService.updateIngredient(this.editedItemIndex, newIngredient); } else { - this.shoppingListService.addIngredient(newIngredient); + this.store.dispatch(new ShoppingListActions.AddIngredient(newIngredient)); } this.editMode = false; form.reset(); diff --git a/src/app/shopping-list/shopping-list.component.ts b/src/app/shopping-list/shopping-list.component.ts index 8842acf..772cbcd 100644 --- a/src/app/shopping-list/shopping-list.component.ts +++ b/src/app/shopping-list/shopping-list.component.ts @@ -1,5 +1,4 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; -import { Subscription } from 'rxjs/Subscription'; +import { Component, OnInit } from '@angular/core'; import { Store } from '@ngrx/store'; import { Observable } from 'rxjs/Observable'; @@ -11,27 +10,17 @@ import { ShoppingListService } from './shopping-list.service'; templateUrl: './shopping-list.component.html', styleUrls: ['./shopping-list.component.css'] }) -export class ShoppingListComponent implements OnInit, OnDestroy { +export class ShoppingListComponent implements OnInit { shoppingListState: Observable<{ingredients: Ingredient[]}>; - private subscription: Subscription constructor(private shoppingListService: ShoppingListService, private store: Store<{shoppingList: {ingredients: Ingredient[]}}>) { } ngOnInit() { this.shoppingListState = this.store.select('shoppingList'); - // this.subscription = this.shoppingListService.ingredientsChanged.subscribe( - // (ingredients: Ingredient[]) => { - // this.ingredients = ingredients; - // } - // ); } onEditItem(index: number) { this.shoppingListService.startedEditing.next(index); } - - ngOnDestroy() { - this.subscription.unsubscribe(); - } } diff --git a/src/app/shopping-list/shopping-list.service.ts b/src/app/shopping-list/shopping-list.service.ts index 2f3ba93..626a4dc 100644 --- a/src/app/shopping-list/shopping-list.service.ts +++ b/src/app/shopping-list/shopping-list.service.ts @@ -5,20 +5,11 @@ export class ShoppingListService { ingredientsChanged = new Subject(); startedEditing = new Subject(); private ingredients: Ingredient[] = []; - - getIngredients() { - return this.ingredients.slice(); - } getIngredient(index: number) { return this.ingredients[index]; } - addIngredient(ingredient: Ingredient) { - this.ingredients.push(ingredient); - this.ingredientsChanged.next(this.ingredients.slice()); - } - addIngredients(ingredients: Ingredient[]) { this.ingredients.push(...ingredients); this.ingredientsChanged.next(this.ingredients.slice());