Angular X中使用ngrx的方法详解（附源码）

前言

ngrx 是 angular框架的状态容器，提供可预测化的状态管理。下面话不多说，来一起看看详细的介绍：

1.首先创建一个可路由访问的模块 这里命名为：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是一个旨在提高写性能的控制状态的容器

3.使用ngrx

首先了解下单向数据流形式

代码如下：

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中定义了我们期望状态如何发生改变   reducer实现了状态具体如何改变

action与store之间添加ngrx/effect   实现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实现数据列表获取与单个详细信息获取

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.运行效果

初始化时候获取数据列表

点击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.模块源代码

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。