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 (file)
--- 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 (file)
--- 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<VorgangComponent>;
   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 (file)
--- 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<number>;
 
-  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 {