[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.tsbootstrap(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