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