ngrx 是 Angular框架的狀態(tài)容器，提供可預(yù)測化的狀態(tài)管理。

1.首先創(chuàng)建一個(gè)可路由訪問的模塊 這里命名為：DemopetModule。

   包括文件：demopet.html、demopet.scss、demopet.component.ts、demopet.routes.ts、demopet.module.ts

    代碼如下：

　demopet.html

<!--暫時(shí)放一個(gè)標(biāo)簽-->
<h1>Demo</h1>

　demopet.scss

h1{
    color:#d70029;
}

demopet.component.ts

import { Component} from '@angular/core';

@Component({
  selector: 'demo-pet',
  styleUrls: ['./demopet.scss'],
  templateUrl: './demopet.html'})
export class DemoPetComponent {    //nothing now...}

demopet.routes.ts

import { DemoPetComponent } from './demopet.component';

export const routes = [
  {
    path: '', pathMatch: 'full', children: [
      { path: '', component: DemoPetComponent }
    ]
  }
];

demopet.module.ts

import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { routes } from './demopet.routes';

@NgModule({
  declarations: [
    DemoPetComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    RouterModule.forChild(routes)
  ],
  providers: [
  ]
})
export class DemoPetModule {


}

整體代碼結(jié)構(gòu)如下：

運(yùn)行效果如下：只是為了學(xué)習(xí)方便，能夠有個(gè)運(yùn)行的模塊

2.安裝ngrx

npm install @ngrx/core --save

npm install @ngrx/store --save

npm install @ngrx/effects --save

@ngrx/store是一個(gè)旨在提高寫性能的控制狀態(tài)的容器

3.使用ngrx

首先了解下單向數(shù)據(jù)流形式

代碼如下：

pet-tag.actions.ts

import { Injectable } from '@angular/core';
import { Action } from '@ngrx/store';

@Injectable()
export class PettagActions{    static LOAD_DATA='Load Data';
    loadData():Action{        return {
            type:PettagActions.LOAD_DATA
        };
    }    static LOAD_DATA_SUCCESS='Load Data Success';
    loadDtaSuccess(data):Action{        return {
            type:PettagActions.LOAD_DATA_SUCCESS,
            payload:data
        };
    }    static LOAD_INFO='Load Info';
    loadInfo():Action{        return {
            type:PettagActions.LOAD_INFO
        };
    }    static LOAD_INFO_SUCCESS='Load Info Success';
    loadInfoSuccess(data):Action{        return {
            type:PettagActions.LOAD_INFO_SUCCESS,
            payload:data
        };
    }
}

pet-tag.reducer.ts

import { Action } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { PettagActions } from '../action/pet-tag.actions';

export function petTagReducer(state:any,action:Action){    switch(action.type){        case PettagActions.LOAD_DATA_SUCCESS:{            return action.payload;
        }        // case PettagActions.LOAD_INFO_SUCCESS:{        //     return action.payload;        // }

        default:{            return state;
        }
    }
}

export function infoReducer(state:any,action:Action){    switch(action.type){        case PettagActions.LOAD_INFO_SUCCESS:{            return action.payload;
        }        default:{            return state;
        }
    }
}

 NOTE:Action中定義了我們期望狀態(tài)如何發(fā)生改變   Reducer實(shí)現(xiàn)了狀態(tài)具體如何改變

Action與Store之間添加ngrx/Effect   實(shí)現(xiàn)action異步請求與store處理結(jié)果間的解耦

pet-tag.effect.ts

import { Injectable } from '@angular/core';
import { Effect,Actions } from '@ngrx/effects';
import { PettagActions } from '../action/pet-tag.actions';
import { PettagService }  from '../service/pet-tag.service';

@Injectable()
export class PettagEffect {

    constructor(        private action$:Actions,        private pettagAction:PettagActions,        private service:PettagService
    ){}


    @Effect() loadData=this.action$
                .ofType(PettagActions.LOAD_DATA)
                .switchMap(()=>this.service.getData())
                .map(data=>this.pettagAction.loadDtaSuccess(data))

    
    @Effect() loadInfo=this.action$
                .ofType(PettagActions.LOAD_INFO)
                .switchMap(()=>this.service.getInfo())
                .map(data=>this.pettagAction.loadInfoSuccess(data));
}

4.修改demopet.module.ts 添加 ngrx支持

import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { PettagActions } from './action/pet-tag.actions';
import { petTagReducer,infoReducer } from './reducer/pet-tag.reducer';
import { PettagEffect } from './effect/pet-tag.effect';

@NgModule({
  declarations: [
    DemoPetComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    RouterModule.forChild(routes),    //here new added    StoreModule.provideStore({
      pet:petTagReducer,
      info:infoReducer
    }),
    EffectsModule.run(PettagEffect)
  ],
  providers: [
    PettagActions,
    PettagService
  ]
})
export class DemoPetModule {  }

5.調(diào)用ngrx實(shí)現(xiàn)數(shù)據(jù)列表獲取與單個(gè)詳細(xì)信息獲取

demopet.component.ts

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { Observable } from "rxjs";
import { Store } from '@ngrx/store';
import { Subscription } from 'rxjs/Subscription';
import { HttpService } from '../shared/services/http/http.service';
import { PetTag } from './model/pet-tag.model';
import { PettagActions } from './action/pet-tag.actions';

@Component({
  selector: 'demo-pet',
  styleUrls: ['./demopet.scss'],
  templateUrl: './demopet.html'})
export class DemoPetComponent {  private sub: Subscription;  public dataArr: any;  public dataItem: any;  public language: string = 'en';  public param = {value: 'world'};

  constructor(    private store: Store<PetTag>,    private action: PettagActions
  ) {    this.dataArr = store.select('pet');
  }

  ngOnInit() {    this.store.dispatch(this.action.loadData());
  }

  ngOnDestroy() {    this.sub.unsubscribe();
  }

  info() {

    console.log('info');    this.dataItem = this.store.select('info');    this.store.dispatch(this.action.loadInfo());
  }

}

demopet.html

<h1>Demo</h1>



<pre>
   <ul>
        <li *ngFor="let d of dataArr | async"> 
            DEMO :  {{ d.msg }}            <button (click)="info()">info</button>
        </li>
    </ul>

    {{ dataItem | async | json }}    <h1 *ngFor="let d of dataItem | async"> {{ d.msg }} </h1>
</pre>

6.運(yùn)行效果

初始化時(shí)候獲取數(shù)據(jù)列表

 點(diǎn)擊info按鈕  獲取詳細(xì)詳細(xì)

7.以上代碼是從項(xiàng)目中取出的部分代碼，其中涉及到HttpService需要自己封裝，data.json demo.json兩個(gè)測試用的json文件，名字隨便取的當(dāng)時(shí)。

http.service.ts

import { Inject, Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { Observable } from "rxjs";
import 'rxjs/add/operator/map';
import 'rxjs/operator/delay';
import 'rxjs/operator/mergeMap';
import 'rxjs/operator/switchMap';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import { handleError } from './handleError';
import { rootPath } from './http.config';

@Injectable()
export class HttpService {    private _root: string="";

    constructor(private http: Http) {        this._root=rootPath;
    }    public get(url: string, data: Map<string, any>, root: string = this._root): Observable<any> {        if (root == null) root = this._root;
        
        let params = new URLSearchParams();        if (!!data) {
            data.forEach(function (v, k) {                params.set(k, v);
            });
       
        }        return this.http.get(root + url, { search: params })
                        .map((resp: Response) => resp.json())
                        .catch(handleError);
    }



}

8.模塊源代碼  下載

http://www.cnblogs.com/besuccess/p/7140834.html

延伸閱讀

• 【Storm】Storm實(shí)戰(zhàn)之頻繁二項(xiàng)集挖掘（附源碼） 2017-07-25
• 使用sqlserver搭建高可用雙機(jī)熱備的Quartz集群部署【附源碼】 2017-06-03
• 基于nopCommerce的開發(fā)框架（附源碼） 2017-05-27
• 環(huán)信SDK 頭像、昵稱、表情自定義和群聊設(shè)置的實(shí)現(xiàn) 一（附源碼） 2017-05-17
• Android仿微信朋友圈，全文收起功能，附源碼 2017-05-16
• Java豆瓣電影爬蟲——小爬蟲成長記（附源碼） 2017-03-20
• MVC系列——MVC源碼學(xué)習(xí)：打造自己的MVC框架（二：附源碼） 2017-02-09
• Laravel 5.x 請求的生命周期（附源碼） 2016-12-25
• [BOT]自己動(dòng)手實(shí)現(xiàn)android 餅狀圖，PieGraphView，附源碼解析 2016-12-15
• Android自定義控件實(shí)例，圓形頭像（圖庫 + 裁剪+設(shè)置），上傳頭像顯示為圓形，附源碼 2016-12-06

【Storm】Storm實(shí)戰(zhàn)之頻繁二項(xiàng)集挖掘（附源碼）