[Angular 2] Using Two Reducers Together

Add another reducer:

export const SECOND = "SECOND";
export const HOUR = "HOUR";

export const clock = (state = new Date(), {type, payload} = {type: ""})=> {
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;
default:
return state;
}

return state;
};

const defaultPeople = [
{name: "Sara", time: clock()},
{name: "Wan", time: clock()},
{name: "Zhen", time: clock()},
{name: "Tian", time: clock()}
];
export const people = (state = defaultPeople, {type, payload}) => {
switch(type){

default:
return state;
}
};

Added a 'people' reducer, defined a 'defaultPeople' as default state.

// main.ts

bootstrap(App, [
provideStore({clock, people})
])

In bootstrap, add people reducer to the provideStore().

Then finally inside app.ts, use log out people information:

/**
* 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 './reducers';
import {ClockComponent} from './clock';

@Component({
selector: 'app',
directives: [ClockComponent],
template: `
<input #inputNum type="number" value="0">
<button (click)="click$.next(inputNum.value)">Update</button>
<clock [time]="time |async"></clock>
<ul>
<li *ngFor="#person of people | async">
{{person.name}} is in {{person.time | date : 'jms'}}
</li>
</ul>
`
})
export class App {
click$ = new Subject()
.map( (number) => ({type: HOUR, payload: parseInt(number)}));

seconds$ = Observable.interval(1000)
.mapTo({type: SECOND, payload: 1});

time;
people;

constructor(store:Store) {
this.time = store.select('clock');
this.people = store.select('people');

Observable.merge(
this.click$,
this.seconds$
)
.subscribe(store.dispatch.bind(store))
}
}