From: Kai Moritz Date: Sun, 28 Jun 2020 21:21:15 +0000 (+0200) Subject: The Counter-Example stores an object as state X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=a232212e2aff197d3aea92194f83f76a241c3559;p=examples%2Fangular-tour-of-heroes The Counter-Example stores an object as state --- diff --git a/src/app/reducers/vorgang.ts b/src/app/reducers/vorgang.ts index fbfe4e8..974efa5 100644 --- a/src/app/reducers/vorgang.ts +++ b/src/app/reducers/vorgang.ts @@ -1,12 +1,22 @@ import { createReducer, on } from '@ngrx/store'; import { increment, decrement, reset } from '../actions/vorgang'; -export const initialState = 0; +export interface State { + counter: number; +} + +export const initialState: State = { counter: 0 }; const REDUCER = createReducer(initialState, - on(increment, state => state + 1), - on(decrement, state => state - 1), - on(reset, state => 0), + on(increment, state => { + return { counter: state.counter + 1 }; + }), + on(decrement, state => { + return { counter: state.counter - 1 }; + }), + on(reset, state => { + return { counter: 0 }; + }), ); export function reducer(state, action) { diff --git a/src/app/vorgang/vorgang.component.spec.ts b/src/app/vorgang/vorgang.component.spec.ts index 82595a0..0d41cdf 100644 --- a/src/app/vorgang/vorgang.component.spec.ts +++ b/src/app/vorgang/vorgang.component.spec.ts @@ -8,7 +8,7 @@ describe('VorgangComponent', () => { let fixture: ComponentFixture; let mockStore: MockStore; - const initialState = { vorgang: 0 }; + const initialState = { vorgang: { counter: 0 } }; beforeEach(async(() => { TestBed.configureTestingModule({ diff --git a/src/app/vorgang/vorgang.component.ts b/src/app/vorgang/vorgang.component.ts index 5af78d0..8324ca0 100644 --- a/src/app/vorgang/vorgang.component.ts +++ b/src/app/vorgang/vorgang.component.ts @@ -1,7 +1,9 @@ import { Component, OnInit } from '@angular/core'; import { Store, select } from '@ngrx/store'; import { Observable } from 'rxjs'; +import { State } from '../reducers/vorgang'; import { increment, decrement, reset } from '../actions/vorgang'; +import { map } from 'rxjs/operators'; @Component({ selector: 'app-vorgang', @@ -12,8 +14,8 @@ export class VorgangComponent implements OnInit { vorgang$: Observable; - constructor(private store: Store<{ vorgang: number }>) { - this.vorgang$ = store.pipe(select('vorgang')); + constructor(private store: Store<{ vorgang: State }>) { + this.vorgang$ = store.pipe(select('vorgang'), map(vorgang => vorgang.counter)); } ngOnInit(): void {