zoukankan      html  css  js  c++  java
  • [Angular] Improve Server Communication in Ngrx Effects with NX Data Persistence in Angular

    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);
                }
            }
        );
    }
  • 相关阅读:
    jar命令|jdt的简单使用
    国际化程序实现
    泛型接口
    RunTime类
    权限控制
    日期操作类
    异常
    Visual C# 2008+SQL Server 2005 数据库与网络开发―― 3.2 C# 2008多语言的新特性
    Visual C# 2008+SQL Server 2005 数据库与网络开发―― 2.6 创建项目
    Visual C# 2008+SQL Server 2005 数据库与网络开发――3.1.3 C# 2008和.NET Framework 3.5的关系
  • 原文地址:https://www.cnblogs.com/Answer1215/p/10340262.html
Copyright © 2011-2022 走看看