[Angular 2] Dispatching Action with Payloads and type to Reducers

While action types allow you tell your reducer what action it should take, the payload is the data that your reducer will use to update the state. 

 

// reducer.ts

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

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

    }

    return state;
};

 

//app.ts

/**
 * 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 './reducer';

@Component({
    selector: 'app',
    template: `
        <button (click)="click$.next()">Update</button>
        <h1>{{clock | async | date:'yMMMMEEEEdjms'}}</h1>
        `
})
export class App {
    click$ = new Subject();

    clock;

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


        Observable.merge(
            this.click$.mapTo({type: HOUR, payload: 1}),
            Observable.interval(1000).mapTo({type: SECOND, payload: 1})
            )
            .subscribe((action)=>{
                store.dispatch(action)
            })
    }
}

 

// main.ts

import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
import {provideStore} from '@ngrx/store';
import {clock} from './reducer';

bootstrap(App, [
    provideStore({clock})
]).then(
    ()=> console.log('App running...'),
    err=> console.log(err)
);

/*
*  1. Create a reducer
*  2. Use provideStore({reducer_name}) to provide store
*  3. Use store.select('reducer_name') to get store in Observable type
*  4. Apply logic to dispatch the action
* */