Sign in
Skip to solution
mediumFrontend

What is the role of NgRx Effects, and why do we separate side effects from reducers?

840 views
01

Understand the problem

Explain NgRx Effects and asynchronous operations.

ngrxarchitecture
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

NgRx reducers must be pure functions. Effects intercept actions, perform asynchronous side effects (e.g. HTTP queries, route changes, logs), and dispatch success/error actions. This isolation ensures components remain thin and state transitions are pure and predictable.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Declaring a functional NgRx Effect for loading profiles
import { inject } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { HttpClient } from '@angular/common/http';
import { of } from 'rxjs';
import { map, exhaustMap, catchError } from 'rxjs/operators';

export const loadProfileEffect = createEffect(
  (actions$ = inject(Actions), http = inject(HttpClient)) => {
    return actions$.pipe(
      ofType('[Profile Page] Load Request'),
      exhaustMap(() =>
        http.get<any>('/api/profile').pipe(
          map(profile => ({ type: '[Profile API] Load Success', payload: profile })),
          catchError(err => of({ type: '[Profile API] Load Failure', error: err }))
        )
      )
    );
  },
  { functional: true }
);
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 29 of 121 decoded in the Angular track. One more won't hurt.

Back to track