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. 【初探移动前端开发】jQuery Mobile 二

    本文例子请使用手机查看 List列表 在移动设备平台下,由于移动设备屏幕比较小,我们又是用手在上面点击的触屏方式,传统的列表模式在手机上就不太友好了. 虽然HTML5与CSS3提供了强大的界面实现方案 ...

  2. OpenStack 计算服务 Nova介绍和控制节点部署 (八)

    一)nova在keystone上服务注册 1.1创建nova务实体 [root@controller ~]# source admin-openrc [root@controller ~]# open ...

  3. MS SQL Server迁移至Azure SQL

    SQL Server的数据目前是存在于公司服务器的,现时需要将它迁移至Azure SQL 迁移分两种 数据库结构复制 数据库结构复制与数据迁移至Azure SQL 第1种方法针对的是将现有数据库创建新 ...

  4. 获取或设置config节点值

    ExeConfigurationFileMap 这个类提供了修改.获取指定 config 的功能:新建一个 ExeConfigurationFileMap 的实例 ecf :并设置 ExeConfig ...

  5. python怎么解压压缩的字符串数据

    范例1: gzip import StringIO import gzip compresseddata = gzip方式压缩的字符串(html) compressedstream = StringI ...

  6. RecyclerView混合布局

    本来想把公司的UI图放上来,考虑到版权等未知因素,就拿网上的图来说了: 类似的这种布局,有的一行只有一张图片,有的一行有两个元素,有个一行有三个元素..就是混合的布局方式 参考文献: https:// ...

  7. python判断一个对象是可迭代?

    1.介绍一下如何判断一个对象是可迭代的? 通过collections模块的Iterable类型判断: >>> from collections import Iterable > ...

  8. 29、Flask实战第29天:cms用户名渲染和注销功能实现

    这节来完成用户名渲染和注销的功能,目前用户名在前端页面是写死的,我们需要动态的展示出来 用户名渲染 实现用户名动态展示,其中一种方法就是在视图函数,根据session信息,获取到user id,通过该 ...

  9. 【BZOJ 3262】 3262: 陌上花开 (CDQ分治)

    3262: 陌上花开 Description 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),又三个整数表示.现要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量.定义一朵花A ...

  10. 【BZOJ 2288】 2288: 【POJ Challenge】生日礼物 (贪心+优先队列+双向链表)

    2288: [POJ Challenge]生日礼物 Description ftiasch 18岁生日的时候,lqp18_31给她看了一个神奇的序列 A1, A2, ..., AN. 她被允许选择不超 ...