iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 26
0
Modern Web

Learning ASP.NET core + Angular2 系列 第 26

[Angular2] Redux with ngrx/store - Intro

Introduction


ngrx/store is a state management container and powers Redux for Angular2.
It allows us to manage our application state and maintains the state of the entire application.

The key elements of Redux:

  1. Action:
    Actions describe WHAT happened.
  2. Reducer
    The reducer is a pure function that takes the previous state and an action, and returns the next state.
  3. Store
    The store holds state and allows the state to be updated by dispatching an action.

We will learn the concept and how ngrx/store works in the simple sample from ngrx/store github.

Environment


  • Angular 2.1.0
  • @ngrx/store 2.2.1

Implement


Install packages

@ngrx/store

State

Create an interface or class for the State.

interface AppState {
    counter: number;
}

Reducer

import { Action, ActionReducer } from '@ngrx/store';

export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const RESET = 'RESET';

export const counterReducer: ActionReducer<number> = (state: number = 0, action: Action) => {
    switch (action.type) {
        case INCREMENT:
            return state + 1;

        case DECREMENT:
            return state - 1;

        case RESET:
            return 0;

        default:
            return state;
    }
}

Import the reducer to injector

  • app.module.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { ProductRoutes } from './product.route';
import { StoreModule } from '@ngrx/store';
import { counterReducer } from '../../../service/counter.action';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        ProductRoutes,
        StoreModule.provideStore(counter: counterReducer)
    ],
    declarations: [
        AppComponent,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

In order to see the power of the ngrx/store, we created three routes and see of the state is persistent during changing routes.

Let us start using Store in component, take one of the three components for example in the following step.

Usage in component

  • component.html
<div>
        <table>
            <tr>
                <td (click)="decrement()"><i class="fa fa-minus"></i></td>
                <td style="min-width:50px" class="text-center">{{counter | async}}</td>
                <td (click)="increment()"><i class="fa fa-plus"></i></td>
            </tr>
        </table>
</div>
  • component.ts
import { Component, OnInit, ViewContainerRef } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Store } from '@ngrx/store';
import { INCREMENT, DECREMENT, RESET } from '../../../service/counter.action';


@Component({
    selector: 'product-books',
    templateUrl: '/app/component/Basic/Product/product-books.component.html'
})

export class ProductBooksComponent implements OnInit {
    private counter: Observable<number>;

    constructor(private store: Store<AppState>) {
        this.counter = store.select("counter");
        //”counter” is the store’s name we created by StoreModule
    }


    private increment() {
        this.store.dispatch({ type: INCREMENT });
    }

    private decrement() {
        this.store.dispatch({ type: DECREMENT });
    }
}

Demo

Whaz next?

We will learn how to use ngrx/store with a shoppig cart sample in the next day-sharing.

Reference


  1. ngrx/store
  2. A conceptual overview of Redux or how I fell in love with a javascript state container

上一篇
[.NET Core] Unit Test with MSTest
下一篇
[Angular2] Redux with ngrx/store – Shopping cart sample (1)
系列文
Learning ASP.NET core + Angular2 31

尚未有邦友留言

立即登入留言