Angular NgRx Counter

CREATE: counter.state.ts
export const initialState = {
    counter: 0
}

CREATE: counter.action.ts
import { createAction } from '@ngrx/store';
export const increment = createAction('[COUNTER] Increment');
export const decrement = createAction('[COUNTER] Decrement');
export const reset = createAction('[COUNTER] Reset');

CREATE: counter.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { decrement, increment, reset } from './counter.action';
import { initialState } from './counter.state';
const _counterFx = createReducer(initialState,
    on(increment, (state) => {
        return {
            ...state,
            counter: state.counter + 1
        }
    }),
    on(decrement, (state) => {
        return {
            ...state,
            counter: state.counter - 1
        }
    }),
    on(reset, (state) => {
        return {
            ...state,
            counter: 0
        }
    }),
);
export function counterReducer(state: any, action: any) {
    return _counterFx(state, action);
}

CREATE: app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StoreModule } from '@ngrx/store';
// import { NgxBootstrapModule } from './ngx-bootstrap/ngx-bootstrap.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CounterOutputComponent } from './counter-output/counter-output.component';
import { CounterButtonComponent } from './counter-button/counter-button.component';
import { counterReducer } from './states/counter.reducer';
@NgModule({
  declarations: [
    AppComponent,
    CounterOutputComponent,
    CounterButtonComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    // NgxBootstrapModule,
    StoreModule.forRoot({ counterX: counterReducer })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

CREATE: counter-output.component.ts
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
@Component({
  selector: 'app-counter-output',
  templateUrl: './counter-output.component.html',
  styleUrls: ['./counter-output.component.scss']
})
export class CounterOutputComponent implements OnInit {
  public counter: number | undefined;
  constructor(private _store: Store<{ counterX: { counter: number } }>) {
  }
  ngOnInit(): void {
    const self = this;
    self._store.select("counterX").subscribe(res => {
      self.counter = res.counter;
    })
  }
}

CREATE: counter-output.component.html
<p>Counter: {{counter }}</p>
<p>counter-output works!</p>
CREATE: counter-button.component.ts
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { decrement, increment, reset } from '../states/counter.action';
@Component({
  selector: 'app-counter-button',
  templateUrl: './counter-button.component.html',
  styleUrls: ['./counter-button.component.scss']
})
export class CounterButtonComponent implements OnInit {
  constructor(private _store: Store<{ counterX: { counter: number } }>) { }
  ngOnInit(): void {
  }
  public onIncrement() {
    const self = this;
    self._store.dispatch(increment());
  }
  public onDecrement() {
    const self = this;
    self._store.dispatch(decrement());
  }
  public onReset() {
    const self = this;
    self._store.dispatch(reset());
  }
}

CREATE: counter-button.component.html
<button (click)="onIncrement()">Increment</button>
<button (click)="onDecrement()">Decrement</button>
<button (click)="onReset()">Reset</button>

CREATE: app.component.html

<app-counter-output></app-counter-output><br />

<app-counter-button></app-counter-button>

OUTPUT:

Share on Google Plus

About Ram Pukar

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.