2017年1月9日 星期一

[Angular] Redux with ngrx/store - Intro

 Angular     ngrx      ngrx/store     Redux  






▌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:

▋Action:

Actions describe WHAT happened.

▋Reducer

The reducer is a pure function that takes the previous state and an action, and returns the next state.

▋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 a simple sample from ngrx/store github.

ngrx had integrated the latest packages, like store, effects…etc, to ngrx/platform repository.


▋Related articles

[Angular] Redux with ngrx/store – Intro
[Angular] Redux with ngrx/store – Shopping cart sample (1)
[Angular] Redux with ngrx/store – Shopping cart sample (2)
[Angular] Redux with ngrx/effects – Shopping cart sample (3)




▌Environment

▋Angular 5.2.0
▋@ngrx/store  5.2.0


▌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 function counterReducer (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 { StoreModule } from '@ngrx/store';
import { counterReducer } from '../../../service/counter.action';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        StoreModule.forRoot({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 use 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 = this.store.select<AppState>(x => x);
    }


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

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

}





▋Demo





▌Sample codes


Github



▌Reference

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




張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)