[Angular] Improve Server Communication in Ngrx Effects with

发布时间：2020-12-17 07:02:38 所属栏目：安全来源：网络整理

导读：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

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?fetch,?optimisticUpdate,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);
            }
        }
    );
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!