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 4f57bb0bac998b4cee73f2f378c20fc8efe7dd37..96a875bb7d9f6c96ab52314b8cdc2080d7383baf 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 759f83bfc34609a8a143fd3cc519ed04d588c654..b45d10d2da236b915e1793e58f4cb606d4d3a181 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 6d671fc9ae990d4499194b7b42d8a75aa425be61..82595a090dec425eaa5a04c60485820c10cf9b1a 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 ddcfe43b60461e50b4e4e8a0519a5281fc9ed23d..5af78d001d55236fe49648a894a2221c4005801f 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());
+  }
 }