// clock.ts

import {Component, Input} from 'angular2/core';

@Component({

    selector: 'clock',

    template: `<h3>{{time | date:'yMMMMEEEEdjms'}}</h3>`

})

export class ClockComponent{

    @Input() time;

    constructor(){

    }

}

// app.ts

/**

 * Created by wanzhen on 26.4.2016.

 */

import {Component} from 'angular2/core';

import {Observable} from 'rxjs/Observable';

import 'rxjs/add/observable/interval';

import 'rxjs/add/operator/map';

import 'rxjs/add/observable/merge';

import 'rxjs/add/operator/startWith';

import 'rxjs/add/operator/scan';

import 'rxjs/add/operator/mapTo';

import {Subject} from "rxjs/Subject";

import {Store} from '@ngrx/store';

import {SECOND, HOUR} from './reducer';

import {ClockComponent} from './clock';

@Component({

    selector: 'app',

    directives: [ClockComponent],

    template: `

        <input #inputNum type="number" value="">

        <button (click)="click$.next(inputNum.value)">Update</button>

        <clock [time]="time | async"></clock>

        `

})

export class App {

    click$ = new Subject()

            .map( (number) => ({type: HOUR, payload: parseInt(number)}));

    seconds$ = Observable.interval()

        .mapTo({type: SECOND, payload: });

    time;

    constructor(store:Store) {

        this.time = store.select('clock');

        Observable.merge(

            this.click$,

            this.seconds$

            )

            .subscribe(store.dispatch.bind(store))

    }

}

// reducer.ts

export const SECOND = "SECOND";

export const HOUR = "HOUR";

export const clock = (state = new Date(), {type, payload})=> {

    const date = new Date(state.getTime());

    switch(type){

        case SECOND:

            date.setSeconds(date.getSeconds() + payload);

            return date;

        case HOUR:

            date.setHours(date.getHours() + payload);

            return date;

    }

    return state;

};

// main.ts

import {bootstrap} from 'angular2/platform/browser';

import {App} from './app';

import {provideStore} from '@ngrx/store';

import {clock} from './reducer';

bootstrap(App, [

    provideStore({clock})

]).then(

    ()=> console.log('App running...'),

    err=> console.log(err)

);

/*

*  1. Create a reducer

*  2. Use provideStore({reducer_name}) to provide store

*  3. Use store.select('reducer_name') to get store in Observable type

*  4. Apply logic to dispatch the action

* */