提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[Angular] Improve Server Communication in Ngrx Effects with NX Data Persistence in Angular

Angularserver in with Data Communication Effects NgRX
2023-09-14 09:00:49 时间

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);
            }
        }
    );
}




 


 
                

                                
                

                
            

        

        

        

            

                
相关文章