码迷,mamicode.com
首页 > 其他好文 > 详细

[Angular 2] Using Two Reducers Together

时间:2016-04-27 22:43:25      阅读:286      评论:0      收藏:0      [点我收藏+]

标签:

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!