Angular X中使用ngrx的方法詳解（附源碼）
更新時間：2017年07月10日 08:33:59 作者：迷惘卻堅定
ngrx是一套利用RxJS的類庫，下面這篇文章主要給大家介紹了關于Angular X中使用ngrx的方法，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
前言
ngrx 是 Angular框架的狀態(tài)容器，提供可預測化的狀態(tài)管理。下面話不多說，來一起看看詳細的介紹：
1.首先創(chuàng)建一個可路由訪問的模塊 這里命名為：DemopetModule。
包括文件：demopet.html、demopet.scss、demopet.component.ts、demopet.routes.ts、demopet.module.ts
代碼如下：
demopet.html
<!--暫時放一個標簽--> <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 {
}
整體代碼結構如下：
運行效果如下：只是為了學習方便，能夠有個運行的模塊
2.安裝ngrx
npm install @ngrx/core --save npm install @ngrx/store --save npm install @ngrx/effects --save
@ngrx/store是一個旨在提高寫性能的控制狀態(tài)的容器
3.使用ngrx
首先了解下單向數(shù)據流形式
代碼如下：
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實現(xiàn)了狀態(tài)具體如何改變
Action與Store之間添加ngrx/Effect 實現(xiàn)action異步請求與store處理結果間的解耦
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.調用ngrx實現(xiàn)數(shù)據列表獲取與單個詳細信息獲取
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.運行效果
初始化時候獲取數(shù)據列表
點擊info按鈕 獲取詳細詳細
7.以上代碼是從項目中取出的部分代碼，其中涉及到HttpService需要自己封裝，data.json demo.json兩個測試用的json文件，名字隨便取的當時。
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.模塊源代碼
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
Angular中ng-template和ng-container的應用小結
Angular的日常工作中經常會使用到ng-template和ng-container，本文對他們做一個總結,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-06-06
簡介可以自動完成UI的AngularJS工具angular-smarty
這篇文章主要介紹了簡介可以自動完成UI的AngularJS工具angular-smarty,包括其中隔離作用域綁定指令符和promise的使用,需要的朋友可以參考下2015-06-06
AngularJs定時器$interval 和 $timeout詳解
這篇文章主要介紹了AngularJs定時器$interval 和 $timeout詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
本文給大家分享的是通過angular中的$compile源碼進行分析，從而更好的理解angular的使用，非常的不錯，希望大家能夠喜歡。2016-01-01
AngularJS實現(xiàn)的select二級聯(lián)動下拉菜單功能示例
這篇文章主要介紹了AngularJS實現(xiàn)的select二級聯(lián)動下拉菜單功能,結合完整實例形式分析了AngularJS實現(xiàn)二級聯(lián)動菜單的具體操作步驟與相關實現(xiàn)技巧,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了AngularJS 最常用的八種功能，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-06-06
本文主要介紹AngularJS ng-src 指令，這里對ng-src 指令的資料做了詳細整理，有需要的小伙伴可以參考下2016-08-08
今天小編就為大家分享一篇Angular異步變同步處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Angular應用程序在首次加載根組件時會在瀏覽器的顯示一個loading...動畫，下面這篇文章主要給大家介紹了關于Angular4如何自定義首屏加載動畫的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編來一起看看吧。2017-07-07
在AngularJS中使用jQuery的zTree插件的方法
這篇文章主要介紹了在AngularJS中使用jQuery的zTree插件的方法,Angular中集成了jqLite,但還不是完全版的jQuery,需要的朋友可以參考下2016-04-04