Within my Effects function, I have implemented the following code structure.
I have included a few lines of code for the catchError block to ensure that:
- Any errors are handled by the state/store
- The errors are forwarded to the global error handler / Interceptors
getItems$ = createEffect((): Observable<Action> => {
return this.action$.pipe(
ofType(ItemActions.getItem),
exhaustMap(() => {
return this.apiClient.getItems().pipe(
map((response) => ItemActions.getItemsSuccess({ response })),
catchError((exception: HttpErrorResponse) =>
of(EMPTY).pipe(
tap(() => this.store.dispatch(ItemActions.getItemsFailure({ exception }))),
switchMap(() => throwError(() => exception)),
),
),
);
}),
);
});
Since implementing this approach involves repeating 5 similar lines of code each time error handling is required, I decided to consolidate it into a separate method:
handle(action: Function, error: HttpErrorResponse, props?: object): Observable<never> {
return of(EMPTY).pipe(
tap(() => this.store.dispatch(action({ exception: error, ...(props && { ...props }) }))),
switchMap(() => throwError(() => error)),
);
}
Therefore, the catchError section now appears as follows:
catchError((error: HttpErrorResponse) => this.errors.handle(ItemActions.getItemsFailure, error)),
While this method is functional, some questions arise:
- What should be the appropriate type for action (Function currently works but may not be ideal)?
- What should be the proper type for props (object is currently used, but ideally should only allow properties specific to the associated action)?