How to make a ngrx-store for feature modeule in Angular 2/6

gistfile1.txt

More information here:
https://github.com/ngrx/platform/blob/master/docs/store/selectors.md
https://toddmotto.com/ngrx-store-understanding-state-selectors

1) In register-page.component.ts:
import { Component, OnInit } from '@angular/core';
// Import for reducers to work
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
// Import State for reducers
import { FeatureState, getCounter } from './register-page.reducers';

@Component({
  selector: 'app-register-page',
  templateUrl: './register-page.component.html',
  styleUrls: ['./register-page.component.scss']
})
export class RegisterPageComponent implements OnInit {
  counter$: Observable<number>;

  constructor(private store: Store<FeatureState>) {
    this.counter$ = this.store.select(getCounter);
  }

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

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

  ngOnInit() {}
}

2) In 'register-page.module.ts':
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Import Bootstrap
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
// Import components
import { RegisterPageComponent } from './register-page.component';
import { RouterModule } from '@angular/router';
// Import for reducers to work
import { StoreModule, ActionReducerMap, Action } from '@ngrx/store';
import { reducers } from './register-page.reducers';

@NgModule({
  imports: [
    CommonModule,
    RouterModule,
    StoreModule.forFeature('register', reducers)
  ],
  declarations: [RegisterPageComponent],
  bootstrap: [RegisterPageComponent],
  exports: [RegisterPageComponent]
})
export class RegisterPageModule {}

3) In 'register-page.reducers.ts':
// Import for reducers to work
import {
  StoreModule,
  ActionReducerMap,
  Action,
  ActionReducer,
  createFeatureSelector
} from '@ngrx/store';
// Import to be able to create a selector
import { createSelector } from '@ngrx/store';

export interface FeatureState {
  counter: number;
}
export const selectFeature = createFeatureSelector<FeatureState>('register');
export const getCounter = createSelector(selectFeature, state => state.counter);

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<FeatureState, any> = {
  counter: counterReducer
};

4) In 'register-page.component.html':
<button type="button" routerLink="/" class="navbar__btn--register btn btn-secondary ">Back</button>
<button (click)="increment()">Increment +</button>
<button (click)="decrement()">Decrement -</button>
<span>Number: {{counter$ | async}}</span>