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

Angular^7.0.3

Share this video with your friends

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.

Oscar Lagatta

~ 6 years ago

Hi Lukas,

when you talk about having an error handling a bit more robust could you please share what would be the correct approach and a link to an example using the NX DataPersistence?

Thank you!

Lukas Ruebbelke(instructor)

~ 6 years ago

Hey Oscar, A pattern I have used is creating an additional error handling action and slice of state within a feature. So in the project actions:

export class HandleProjectError implements Action {
  readonly type = ProjectsActionTypes.HandleProjectError;
  constructor(public payload: Error) { }
}

and in the effect:

onError: (action: LoadProjects, error) => {
  return of(new HandleProjectError(error))
}

and in the reducer:

case ProjectsActionTypes.HandleProjectError: {
  return { ...state, error: action.payload };
}

and so on through the selectors and facades.