标签:
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)) } }
[Angular 2] Using Two Reducers Together
标签:
原文地址:http://www.cnblogs.com/Answer1215/p/5440387.html