[Angular 2] Using Two Reducers Together-优快云博客

本文通过一个具体的应用案例展示了如何使用Redux进行状态管理。首先定义了clock和people两个reducer来处理不同的状态更新逻辑，并将它们注册到store中。然后在Angular应用中通过store选择状态并响应用户操作触发的状态变更。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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))
    }
}