Integrated Counter-Example from https://ngrx.io/guide/store

diff --git a/src/app/actions/vorgang.ts b/src/app/actions/vorgang.ts
new file mode 100644 (file)
index 0000000..33a5a13
--- /dev/null
+++ b/src/app/actions/vorgang.ts
@@ -0,0 +1,5 @@
+import { createAction } from '@ngrx/store';
+
+export const increment = createAction('[Counter Component] Increment');
+export const decrement = createAction('[Counter Component] Decrement');
+export const reset = createAction('[Counter Component] Reset');

diff --git a/src/app/reducers/index.ts b/src/app/reducers/index.ts
index 4f57bb0..96a875b 100644 (file)
--- a/src/app/reducers/index.ts
+++ b/src/app/reducers/index.ts
@@ -6,13 +6,14 @@ import {
   MetaReducer
 } from '@ngrx/store';
 import { environment } from '../../environments/environment';
+import * as fromVorgang from './vorgang';
 
 export interface State {
 
 }
 
 export const reducers: ActionReducerMap<State> = {
-
+  vorgang: fromVorgang.reducer
 };
 
 

diff --git a/src/app/reducers/vorgang.ts b/src/app/reducers/vorgang.ts
new file mode 100644 (file)
index 0000000..fbfe4e8
--- /dev/null
+++ b/src/app/reducers/vorgang.ts
@@ -0,0 +1,14 @@
+import { createReducer, on } from '@ngrx/store';
+import { increment, decrement, reset } from '../actions/vorgang';
+
+export const initialState = 0;
+
+const REDUCER = createReducer(initialState,
+  on(increment, state => state + 1),
+  on(decrement, state => state - 1),
+  on(reset, state => 0),
+);
+
+export function reducer(state, action) {
+  return REDUCER(state, action);
+}

diff --git a/src/app/vorgang/vorgang.component.html b/src/app/vorgang/vorgang.component.html
index 759f83b..b45d10d 100644 (file)
--- a/src/app/vorgang/vorgang.component.html
+++ b/src/app/vorgang/vorgang.component.html
@@ -1 +1,7 @@
-<p>{{vorgang}}</p>
+<button id="increment" (click)="increment()">Increment</button>
+
+<div>Vorgang: <span id="vorgang">{{ vorgang$ | async }}</span></div>
+
+<button id="decrement" (click)="decrement()">Decrement</button>
+
+<button id="reset" (click)="reset()">Reset Counter</button>

diff --git a/src/app/vorgang/vorgang.component.spec.ts b/src/app/vorgang/vorgang.component.spec.ts
index 6d671fc..82595a0 100644 (file)
--- a/src/app/vorgang/vorgang.component.spec.ts
+++ b/src/app/vorgang/vorgang.component.spec.ts
@@ -1,16 +1,23 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideMockStore, MockStore } from '@ngrx/store/testing';
 
 import { VorgangComponent } from './vorgang.component';
 
 describe('VorgangComponent', () => {
   let component: VorgangComponent;
   let fixture: ComponentFixture<VorgangComponent>;
+  let mockStore: MockStore;
+
+  const initialState = { vorgang: 0 };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ VorgangComponent ]
+      declarations: [ VorgangComponent ],
+      providers: [ provideMockStore({ initialState }) ]
     })
     .compileComponents();
+
+    mockStore = TestBed.inject(MockStore);
   }));
 
   beforeEach(() => {
@@ -27,6 +34,6 @@ describe('VorgangComponent', () => {
     const fixture = TestBed.createComponent(VorgangComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('p').textContent).toContain('Hello world!');
+    expect(compiled.querySelector('#vorgang').textContent).toContain('0');
   });
 });

diff --git a/src/app/vorgang/vorgang.component.ts b/src/app/vorgang/vorgang.component.ts
index ddcfe43..5af78d0 100644 (file)
--- a/src/app/vorgang/vorgang.component.ts
+++ b/src/app/vorgang/vorgang.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import { Store, select } from '@ngrx/store';
+import { Observable } from 'rxjs';
+import { increment, decrement, reset } from '../actions/vorgang';
 
 @Component({
   selector: 'app-vorgang',
@@ -7,11 +10,24 @@ import { Component, OnInit } from '@angular/core';
 })
 export class VorgangComponent implements OnInit {
 
-  vorgang = "Hello world!";
+  vorgang$: Observable<number>;
 
-  constructor() { }
+  constructor(private store: Store<{ vorgang: number }>) {
+    this.vorgang$ = store.pipe(select('vorgang'));
+  }
 
   ngOnInit(): void {
   }
 
+  increment() {
+    this.store.dispatch(increment());
+  }
+
+  decrement() {
+    this.store.dispatch(decrement());
+  }
+
+  reset() {
+    this.store.dispatch(reset());
+  }
 }