Create a simple increment/decrement reducer in ngrx for Angular 2/6

gistfile1.txt

1) In 'app.module.ts'
- import reducers:
import { reducers } from './app.reducers';

- make sure your module looks similar:
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgbModule.forRoot(),
    MainPageModule,
    RegisterPageModule,
    StoreModule.forRoot(reducers),
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // debugging purposes only
    ),
    StoreRouterConnectingModule.forRoot({
      stateKey: 'router' // name of reducer key
    }),
    StoreModule.forRoot(reducers),
    // Instrumentation must be imported after importing StoreModule (config is optional)
    StoreDevtoolsModule.instrument({
      maxAge: 25, // Retains last 25 states
      logOnly: environment.production // Restrict extension to log-only mode
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

2) In 'app.reducers.ts':

// Import Angular router
import {
  RouterModule,
  Routes,
  Params,
  RouterStateSnapshot
} from '@angular/router';
// Import ngrx router
import {
  StoreRouterConnectingModule,
  routerReducer,
  RouterAction,
  RouterReducerState,
  RouterStateSerializer
} from '@ngrx/router-store';
import {
  StoreModule,
  ActionReducerMap,
  Action,
  ActionReducer
} from '@ngrx/store';

export interface RouterStateUrl {
  url: string;
  params: Params;
  queryParams: Params;
}

export interface State {
  router: RouterReducerState<RouterStateUrl>;
  counter: number;
}

export const counterReducer: ActionReducer<number> = (
  state: number = 0,
  action: Action
) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

export const reducers: ActionReducerMap<State, any> = {
  router: routerReducer,
  counter: counterReducer
};

3) In 'app.component.ts':
import { Component } from '@angular/core';
// Import for reducers to work
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { State } from './app.reducers';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'frontend';
  counter$: Observable<number>;

  constructor(private store: Store<State>) {
    this.counter$ = this.store.select<number>('counter');
  }

  increment() {
    this.store.dispatch({ type: 'INCREMENT' });
  }

  decrement() {
    this.store.dispatch({ type: 'DECREMENT' });
  }
}

4) In 'app.component.html':
<button (click)="increment()">Increment +</button>
<button (click)="decrement()">Decrement -</button>
<span>Number: {{counter$ | async}}</span>
<router-outlet></router-outlet>