Communicating with a remote server via HTTP presents an extra level of complexity as there is an increased chance of race conditions and the need for error handling. There is also the tricky problem of how to handle the user experience as the application is trying to complete the remote request. NX Data Persistence is a library that works with ngrx effects to give us a better way to handle remote server calls as well as improving on the overall shape of the effect itself. In this lesson, we are going to convert our stock effects to use NX Data Persistence and the advantages of doing so by using fetchoptimisticUpdate, and pessimisticUpdate. We will also see how it gives us a neat division in our effect to handle the sequence we want to run as well as any errors that should arise in the process.

Install:

npm i --save @nrwl/nx

app.module.ts:


import { NxModule } from '@nrwl/nx';
imports: [
...
NxModule.forRoot(),
...
],

effect:

import { Injectable } from '@angular/core';
import {Effect} from '@ngrx/effects';
import { DataPersistence } from '@nrwl/nx';
import {Action} from '@ngrx/store';
import { RolesService } from '../services/roles.service';
import { Observable } from 'rxjs';
import { switchMap, map } from 'rxjs/operators'; import * as actions from '../actions';
import { Role } from '../models';
import { DashbaordState } from '../reducers'; @Injectable()
export class RolesEffects {
constructor(
private rolesService: RolesService,
private dataPersistence: DataPersistence<DashbaordState>
) {
} @Effect()
loadRoles$: Observable<Action> = this.dataPersistence.fetch(
actions.RolesActionTypes.LoadRoles, {
run: (action: actions.LoadRoles) => {
return this.rolesService.roles.pipe(
map((roles: Role[]) => new actions.LoadRolesSuccess(roles))
);
},
onError: (action: actions.LoadRoles, error) => {
console.error('Error', action, error);
}
}
);
}

[Angular] Improve Server Communication in Ngrx Effects with NX Data Persistence in Angular的更多相关文章

  1. [Angular2] @Ngrx/store and @Ngrx/effects learning note

    Just sharing the learning experience related to @ngrx/store and @ngrx/effects. In my personal opinio ...

  2. Angular应用架构设计-3:Ngrx Store

    这是有关Angular应用架构设计系列文章中的一篇,在这个系列当中,我会结合这近两年中对Angular.Ionic.甚至Vuejs等框架的使用经验,总结在应用设计和开发过程中遇到的问题.和总结的经验, ...

  3. [Angular] Ngrx/effects, Action trigger another action

    @Injectable() export class LoadUserThreadsEffectService { constructor(private action$: Actions, priv ...

  4. [Angular] Extract Implementation Details of ngrx from an Angular Application with the Facade Pattern

    Extracting away the implementation details of ngrx from your components using the facade pattern cre ...

  5. Identity Server 4 原理和实战(完结)_建立Angular 客户端

    https://material.angular.io/ 第一部是安装angular cli --prefix=ac:前缀 --routing:默认使用路由 style=scss:样式使用scss - ...

  6. [Angular2 Router] Load Data Based on Angular 2 Route Params

    You can load resource based on the url using the a combination of ActivatedRouteand Angular 2’s Http ...

  7. SQL Server Reporting Services 自定义数据处理扩展DPE(Data Processing Extension)

    最近在做SSRS项目时,遇到这么一个情形:该项目有多个数据库,每个数据库都在不同的服务器,但每个数据库所拥有的数据库对象(table/view/SPs/functions)都是一模一样的,后来结合网络 ...

  8. Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题

    前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...

  9. Angular14 Visual Studio Code作为Angular开发工具常用插件安装、json-server安装与使用、angular/cli安装失败问题、emmet安装

    前提准备: 搭建好Angular开发环境 1 安装Visual Studio Code 教程简单,不会的去问度娘 2 安装Chrome浏览器 教程简单,不会的趣闻度娘 3 Visual Studio ...

随机推荐

  1. 部署centos6

    挂载镜像和导入镜像 mount /dev/cdrom /media ll /media/ cobbler import --path=/media --name=centos6.5--arch=x86 ...

  2. Ubuntu 17.04 搭建LAMP服务器环境流程

    安装Apache2 安装代码 sudo apt-get install apache2 更改默认目录 sudo vim /etc/apache2/apache2.conf // 将 <Direc ...

  3. python spyder 今天突然打不开了【已解决】

    python spyder 我是设置开机启动的,先出现dos窗口,然后是蜘蛛网,后面就什么都没有了.然后百度了半天,在csdn看到一篇文章,试了一下,内牛满面! 方法:C:\Documents and ...

  4. POJ 1797 Heavy Transportation 【最大生成树的最小边/最小瓶颈树】

    Background Hugo Heavy is happy. After the breakdown of the Cargolifter project he can now expand bus ...

  5. STL容器 -- Priority_Queue

    核心:和队列相似,但优先队列中的 “下一个元素” 指的是 “优先级最高” 的元素. 头文件:#include<queue> 普通类型的构造方法: priority_queue<int ...

  6. BZOJ 4873 寿司餐厅(最大权闭合图 网络流)

    寿司餐厅 时间限制: 1 Sec  内存限制: 512 MB提交: 6  解决: 3[提交][状态][讨论版] 题目描述 Kiana 最近喜欢到一家非常美味的寿司餐厅用餐.每天晚上,这家餐厅都会按顺序 ...

  7. Flask实战第58天:发布帖子功能完成

    发布帖子后台逻辑完成 首先给帖子设计个模型,编辑apps.models.py class PostModel(db.Model): __tablename__ = 'post' id = db.Col ...

  8. shell脚本--字符串处理和动态数组

    Linux下的文本处理命令,以清晰的列分割数据为高效处理源: awk 的gsub函数可替换指定字符串 echo "<tr><td>col1</td>< ...

  9. python 去掉换行符或者改为其他方式结尾的方法(end='')

    输入参数不换行,就是打印之后不换行,在python2.7中使用 "," >>>def test(): print 'hello', print "wor ...

  10. 【BZOJ 2118】 2118: 墨墨的等式 (最短路)

    2118: 墨墨的等式 Description 墨墨突然对等式很感兴趣,他正在研究a1x1+a2y2+…+anxn=B存在非负整数解的条件,他要求你编写一个程序,给定N.{an}.以及B的取值范围,求 ...