How do NgRx Effects let you handle asynchronous operations, like an API call, in response to a dispatched action?

An Effect listens for a specific action, performs an asynchronous operation like an HTTP request, and then dispatches a new action once that operation completes, keeping asynchronous side effects cleanly separated from the pure, synchronous reducer functions that update the actual state.

loadUsers$ = createEffect(() =>
  this.actions$.pipe(
    ofType(loadUsers),
    mergeMap(() => this.userService.getUsers().pipe(
      map((users) => loadUsersSuccess({ users })),
      catchError((error) => of(loadUsersFailure({ error })))
    ))
  )
);