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

import { ApplicationConfig, Component, Injectable, inject, signal } from "@angular/core";
import { Actions, createEffect, ofType, provideEffects } from "@ngrx/effects";
import { ActionReducer, Store, createActionGroup, createFeature, createReducer, emptyProps, on, props, provideStore } from "@ngrx/store";
import { Observable, catchError, delay, exhaustMap, map, of, tap, throwError } from "rxjs";

// ── Actions: the component only ever says WHAT happened. ───────────────────
export const UsersActions = createActionGroup({
  source: "Users Page",
  events: {
    Opened: emptyProps(),
    "Load Success": props<{ users: string[] }>(),
    "Load Failure": props<{ error: string }>(),
  },
});

// ── A fake API (stands in for HttpClient). Toggle `failNext` to simulate a 500. ──
@Injectable({ providedIn: "root" })
export class UsersApi {
  failNext = false;
  calls = 0;
  getAll(): Observable<string[]> {
    this.calls++;
    return this.failNext ? throwError(() => new Error("500 Server Error")) : of(["Ann", "Bob"]).pipe(delay(100));
  }
}

// ── Reducer: pure, synchronous, no HTTP. It just records outcomes. ─────────
interface UsersState {
  users: string[];
  loading: boolean;
  error: string | null;
}
export const usersFeature = createFeature({
  name: "users",
  reducer: createReducer<UsersState>(
    { users: [], loading: false, error: null },
    on(UsersActions.opened, (s) => ({ ...s, loading: true, error: null })),
    on(UsersActions.loadSuccess, (s, { users }) => ({ ...s, users, loading: false })),
    on(UsersActions.loadFailure, (s, { error }) => ({ ...s, error, loading: false })),
  ),
});

// ── Effects: listen for actions, do the async work, dispatch the result. ──
export const loadUsers = createEffect(
  (actions$ = inject(Actions), api = inject(UsersApi)) =>
    actions$.pipe(
      ofType(UsersActions.opened),
      exhaustMap(() =>
        api.getAll().pipe(
          map((users) => UsersActions.loadSuccess({ users })),
          // catchError INSIDE the inner stream: the effect itself stays alive.
          catchError((e: Error) => of(UsersActions.loadFailure({ error: e.message }))),
        ),
      ),
    ),
  { functional: true },
);

// A non-dispatching effect: a side effect with no resulting action.
export const notifyOnFailure = createEffect(
  (actions$ = inject(Actions)) =>
    actions$.pipe(
      ofType(UsersActions.loadFailure),
      tap(({ error }) => toasts.update((t) => [...t, "toast: " + error])),
    ),
  { functional: true, dispatch: false },
);

export const toasts = signal<string[]>([]);
export const actionLog = signal<string[]>([]);
function logger(reducer: ActionReducer<any>): ActionReducer<any> {
  return (state, action) => {
    actionLog.update((l) => [...l, action.type]);
    return reducer(state, action);
  };
}

export const appConfig: ApplicationConfig = {
  providers: [
    provideStore({ [usersFeature.name]: usersFeature.reducer }, { metaReducers: [logger] }),
    provideEffects({ loadUsers, notifyOnFailure }),
  ],
};

@Component({
  selector: "app-root",
  template: `
    <label><input type="checkbox" (change)="api.failNext = $any($event.target).checked" /> make the API fail</label>
    <button (click)="store.dispatch(opened())">Open users page</button>
    <p>loading={{ loading() }} users={{ users().join(", ") || "none" }} error={{ error() ?? "none" }}</p>
    <p>{{ toasts().join(" | ") }}</p>
    <ol>
      @for (type of log(); track $index) {
        <li>{{ type }}</li>
      }
    </ol>
  `,
})
export class AppComponent {
  store = inject(Store);
  api = inject(UsersApi);
  opened = UsersActions.opened;
  users = this.store.selectSignal(usersFeature.selectUsers);
  loading = this.store.selectSignal(usersFeature.selectLoading);
  error = this.store.selectSignal(usersFeature.selectError);
  toasts = toasts;
  log = actionLog;
}