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 相关文章推荐
JavaScript入门教程 Cookies
Jan 31 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
js关于精确计算和数值格式化以及直接引js文件
Jan 28 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
JavaScript判断数字是否为质数的方法汇总
Jun 02 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
Vue实现table上下移动功能示例
Feb 21 Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 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
php HtmlReplace输入过滤安全函数
2010/07/03 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
php实现可运算的验证码
2015/11/10 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
用javascript来实现动画导航效果的代码
2007/12/16 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
Extjs根据条件设置表格某行背景色示例
2014/07/23 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
使用canvas及js简单生成验证码方法
2017/04/02 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
2019/09/10 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
Python 条件判断的缩写方法
2008/09/06 Python
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
python爬虫框架scrapy实现模拟登录操作示例
2018/08/02 Python
Python中一些深不见底的“坑”
2019/06/12 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
如何把外网python虚拟环境迁移到内网
2020/05/18 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
大学军训决心书
2015/02/05 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
ant design vue的form表单取值方法
2022/06/01 Vue.js