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.tsexport 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: `        Update        
{
   {clock | async | date:'yMMMMEEEEdjms'}}
        `})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.tsimport {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* */