import { NgRedux , select } from "ng2-redux" ; import { Component , Inject } from "@angular/core" ; import { AppStore } from "angular2-redux-util" ; import { Compbaser } from "ng-mslib" ; import * as SampleActionTypes from "../../actions/SampleActions" ; import { SampleActions } from "../../actions/SampleActions" ; import * as _ from "lodash" ; import { Observable } from "rxjs" ; import { setTimeout } from "timers" ; @ Component ( { selector : 'obs-redux' , template : `
      I am : {{me}}
      <br/>
      <button (click)="startStream()" class="btn">Start stream</button>
      <button (click)="startPings()" class="btn">Start pings</button>
      <h5>StringJSPipe pipe: {{selectedReportNameLong | StringJSPipe:stringJSPipeArgs}}</h5>
      <hr/>
      <h5>example of ng-redux and AppStore redux store</h5>
      <h4>async subscription using ng-redux @select decorator</h4>
      <p>{{obs1$ | async }}</p>
      <h4>async subscription using ng-redux select operator</h4>
      <p>{{obs2$ | async }}</p>
      <h4>async subscription using AppStore subscription</h4>
      <p>{{none_obs_value}}</p>
      <h4>pings</h4>
      <p>pings: {{obs3$ | async }}</p>
    ` , } ) export class ObsRedux extends Compbaser { constructor ( private store , private appStore , @ Inject ( 'OFFLINE_ENV' ) private offlineEnv , private action ) { super ( ) ; this . cancelOnDestroy ( this . appStore . sub ( ( i_value ) => { this . none_obs_value = i_value ; } , 'sample_reducer.general' ) ) ; } ngOnInit ( ) { this . obs2$ = this . store . select ( [ 'sample_reducer' , 'general' ] ) . map ( e => e ) ; } private startPings ( ) { this . store . dispatch ( { type : 'PING' } ) ; } private startStream ( ) { this . store . dispatch ( { type : SampleActionTypes . GENERAL_STATUS , payload : _ . uniqueId ( ) } ) ; setTimeout ( ( ) => { this . appStore . dispatch ( { type : SampleActionTypes . GENERAL_STATUS , payload : _ . uniqueId ( ) } ) ; } , 2000 ) ; setTimeout ( ( ) => { this . store . dispatch ( this . action . serverStatus ( ) ) ; } , 2000 ) ; setTimeout ( ( ) => { setInterval ( ( ) => { this . store . dispatch ( this . act ( _ . uniqueId ( ) ) ) ; } , 1000 ) ; } , 4000 ) ; } @ select ( [ 'sample_reducer' , 'general' ] ) obs1$ : Observable < number > ; @ select ( [ 'sample_reducer' , 'pings' ] ) obs3$ : Observable < number > ; private obs2$ : Observable < number > ; private none_obs_value : number ; private selectedReportNameLong : string = 'hello-world-humanize-me' ; public stringJSPipeArgs = { humanize : [ ] } ; private act = ( i_value ) : any => { return ( dispatch ) => { setTimeout ( ( ) => { dispatch ( { type : SampleActionTypes . GENERAL_STATUS , payload : i_value } ) ; } , 500 ) ; } ; } ; }