NgRx Effects: Proper Setup, Error Handling and Common Pitfalls

Problem: Effect silently fails to dispatch success actions

When an NgRx effect does not dispatch the expected success action, the component UI stays stale and the store appears inconsistent. The usual cause is a missing return statement or an error path that does not emit a failure action.

Useful takeaway

Always return the Observable from createEffect, register the effect with EffectsModule.forFeature in the feature module, and use catchError to wrap errors in a dispatched loadFailure action.

Mechanism: how createEffect works

createEffect returns an Observable that subscribes to the store's action stream (this.actions$). When a matching action flows through, the pipe chain runs step by step:

1. ofType(load) filters the action stream, letting only actions of the specified type pass.
2. mergeMap switches to an asynchronous source, such as an HTTP request, while allowing concurrent emissions.
3. map transforms the HTTP response payload into a success action, for example loadSuccess({ payload: data }).
4. catchError intercepts any error from the upstream observable and repurposes it with of(loadFailure({ payload: error })), ensuring the stream never completes unexpectedly.

import { createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { mergeMap, map, catchError } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import * as AuthActions from './auth.actions';

@Injectable({ providedIn: 'root' })
export class AuthEffects {
  load$ = createEffect(() => this.actions$.pipe(
    ofType(AuthActions.load),
    mergeMap(() => this.http.get('/api/auth').pipe(
      map(data => AuthActions.loadSuccess({ payload: data })),
      catchError(error => of(AuthActions.loadFailure({ payload: error })))
    ))
  ));
}

Common mistakes and limits

• Missing return: The function passed to createEffect must return the Observable. Omitting the return value or returning a plain object breaks the stream and causes silent failures.
• Operator selection: switchMap cancels the previous HTTP request when a new action arrives, which is ideal for login flows but can cause unexpected cancellations if navigation occurs mid-request. mergeMap fires concurrent requests; use concatMap to queue them sequentially.
• Effect registration: Effects must be provided via EffectsModule.forRoot([AuthEffects]) at the app root or EffectsModule.forFeature([AuthEffects]) in a feature module. Forgetting to register means the effect never instantiates.
• Error shape: The error object from catchError is the raw HTTP error; structure it consistently (e.g., loadFailure({ payload: error.message })) so consumers handle it predictably.

Practical verification

• Open the NgRx Store DevTools in the browser. Trigger the load action and verify that loadSuccess or loadFailure appear in the action timeline.
• Write a unit test using provideMockStore and Jasmine marbles: dispatch load, expect the stream to produce loadSuccess or loadFailure based on the mocked HTTP response.

When the effect is correctly configured, the store updates predictably and the UI reflects the latest data without manual subscription management.