Angular X中使用ngrx的方法详解(附源码)


Posted in Javascript onJuly 10, 2017

前言

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 {


}

整体代码结构如下:

Angular X中使用ngrx的方法详解(附源码)

运行效果如下:只是为了学习方便,能够有个运行的模块

Angular X中使用ngrx的方法详解(附源码) 

2.安装ngrx

npm install @ngrx/core --save

npm install @ngrx/store --save

npm install @ngrx/effects --save

@ngrx/store是一个旨在提高写性能的控制状态的容器

3.使用ngrx

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

Angular X中使用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.运行效果

初始化时候获取数据列表

Angular X中使用ngrx的方法详解(附源码)

点击info按钮  获取详细详细

Angular X中使用ngrx的方法详解(附源码) 

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

总结

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

Javascript 相关文章推荐
摘自启点的main.js
Apr 20 Javascript
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
jquery 查找新建元素代码
Jul 06 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
PHP PDO操作总结
Nov 17 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
JS交互点击WKWebView中的图片实现预览效果
Jan 05 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
angular实现spa单页面应用实例
Jul 10 #Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 #Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 #Javascript
vue.js实现备忘录功能的方法
Jul 10 #Javascript
AugularJS从入门到实践(必看篇)
Jul 10 #Javascript
基于easyui checkbox 的一些操作处理方法
Jul 10 #Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 #Javascript
You might like
THINKPHP+JS实现缩放图片式截图的实现
2010/03/07 PHP
php缓存技术详细总结
2013/08/07 PHP
php以post形式发送xml的方法
2014/11/04 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
js+xml生成级联下拉框代码
2012/07/24 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
Node 升级到最新稳定版的方法分享
2018/05/17 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
python保存文件方法小结
2018/07/27 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
python应用Axes3D绘图(批量梯度下降算法)
2020/03/25 Python
python 负数取模运算实例
2020/06/03 Python
python中的测试框架
2020/11/13 Python
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
一分钟演讲稿
2014/04/30 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
关于企业的执行力标语大全
2020/01/06 职场文书
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android
MySQL创建管理LIST分区
2022/04/13 MySQL
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers