Angular2 - NgRedux Reducer, make a new state, change it from a sending component, subscribe to changes from a receiving component

readme.ts

// 0) Configure the store in app.module.ts and combine reducers file if you have more than one.
// 1) write a reducer in the relveant reducer file ex. items.reducers.ts:
// 2) Optional Best Practice - Add it's consts to app.consts.ts listed below.
// 3) export the reducer ex. "selectedItemTimer"
// 4) DISPATCH the payload you desire from the sending.component.ts:
onSelect(item) {

  this.ngRedux.dispatch({type: ItemsConsts.INIT_ITEM_TIMER, payload: this.timer});
}
// 5) Declare this stream in the receiving component: 
@select selectedItemTimer$: Oservable<any>;
// 6.1) Subscribe to it in the receiving component:
this.selectedItemTimer$.subscribe(function(timerLength){
  this.timer = timerLength;
});
// 6.2 or subscribe via async pipe like so:
<div class="timer">
  {{myState | async}}.selectedItemTimer  
</div>

// 7) now you can use the payload value you dispatched within the receiving.component.ts

app.consts.ts

export module ItemsConsts {
  export const INIT_ITEM_TIMER = 'INIT_ITEM_TIMER';
}

app.module.ts

import {AppComponent} from "./app.component";
import {BrowserModule} from "@angular/platform-browser";
import {SharedModule} from "./shared/shared.module";
import {NgReduxModule, NgRedux} from 'ng2-redux';
import {combineReducers, Reducer} from "redux";
import {ItemsService} from './items/items.service';


@NgModule({
	imports: [BrowserModule, SharedModule, NgReduxModule],       // module dependencies
	declarations: [AppComponent],   // components and directives
	providers: [ItemsService, NgRedux], // app level services
	bootstrap: [AppComponent],     // root component
})
export class AppModule {
	constructor(ngRedux: NgRedux<any>) {
		// item Reducers:
		let reducers = _.merge(
			itemsReducers,
			itemReducers);

		ngRedux.configureStore(combineReducers(reducers), undefined/*, [createLogger()]*/);		
	}
}

items.reducers.ts

import * as _ from 'lodash';
import {ItemsConsts} from '../shared/app.consts';

// timer reducer
export const INITIAL_ITEM_TIMER = [];
export const SelectedItemTimerReducer = (state: any = INITIAL_ITEM_TIMER, {type, payload}) => {
    switch (type) {
        case ItemsConsts.INIT_ITEM_TIMER:
            // console.log('payload in SelectedItemTimerReducer:', payload);
            return payload;
        default:
            return state;
    }
};

// the stream to call is mapped under the itemReducers Object. in our ex. it's name is "selectedItemTimer"
export const itemReducers = {
    selectedItemTimer: SelectedItemTimerReducer,
};

receiving.component.ts

import { Component, OnInit } from '@angular/core';
import {select} from "ng2-redux";
import {Observable} from "rxjs";

@Component({
    selector: 'receiving',
    templateUrl: 'receiving.html',
    styleUrls: ['receiving.scss'],
})
export class ItemOverviewComponent implements OnInit {

    @select() selectedItemTimer$: Observable<any[]>;
    private timer: number;

    constructor() { }

    ngOnInit() {
        this.selectedItemTimer$.subscribe(function(timerLength){this.timer = timerLength});
    }

}

sending.component.ts

import { Component, OnInit} from '@angular/core';
import {Observable} from 'rxjs';
import {select, NgRedux} from 'ng2-redux';
import {ItemsConsts} from '../../../shared/app.consts';

@Component({
    selector: 'sending',
    templateUrl: 'sending.html',
    styleUrls: ['sending.scss']
})
export class ItemComponent implements OnInit {
    private timer: number = 3;

    constructor(private ngRedux: NgRedux<any>) { }

    ngOnInit() {}
      
    onSelect(item) {
        this.ngRedux.dispatch({type: ItemsConsts.INIT_ITEM_TIMER, payload: this.timer});
    }
}