[Angular 2] Using ngrx/store and Reducers for Angular 2 Application State

ngrx/store is a library that simplifies common RxJS patterns for managing state and gives you an easy api to use it within your Angular 2 application. This lesson shows how to convert a common startWith and scan stream into an ngrx Store and reducer.

// 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
* */

// 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';

@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('hour'),
            Observable.interval(1000).mapTo('second')
            )
            .subscribe((type)=>{
                store.dispatch({type})
            })
    }
}

// reducer.ts

export const clock = (state = new Date(), {type})=> {
    const date = new Date(state.getTime());
    switch(type){
        case 'second':
            date.setSeconds(date.getSeconds() + 1);
            return date;

        case 'hour':
            date.setHours(date.getHours() + 2);
            return date;

    }

    return state;
};