Effects & Selectors

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { inject } from '@angular/core';
import { switchMap, map, catchError } from 'rxjs/operators';

@Injectable()
export class UsersEffects {
  private actions$ = inject(Actions);
  private userService = inject(UserService);

  loadUsers$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadUsers),              // filter for this action type
      switchMap(() =>                  // cancel previous, subscribe to new
        this.userService.getUsers().pipe(
          map(users => loadUsersSuccess({ users })),
          catchError(error => of(loadUsersFailure({ error: error.message }))),
        )
      ),
    )
  );

  // Effect that doesn't dispatch (side effect only)
  logUserLoad$ = createEffect(() =>
    this.actions$.pipe(
      ofType(loadUsersSuccess),
      tap(({ users }) => this.analytics.track('users_loaded', { count: users.length })),
    ),
    { dispatch: false }  // ← required when not dispatching
  );
}

import { createEntityAdapter, EntityState } from '@ngrx/entity';

// Entity adapter for User type
export const userAdapter = createEntityAdapter<User>({
  selectId: user => user.id,
  sortComparer: (a, b) => a.name.localeCompare(b.name),
});

// State with EntityState (ids + entities map)
export interface UsersState extends EntityState<User> {
  loading: boolean;
  error: string | null;
  selectedUserId: string | null;
}

export const initialState: UsersState = userAdapter.getInitialState({
  loading: false,
  error: null,
  selectedUserId: null,
});

// Reducer using adapter methods:
export const usersReducer = createReducer(
  initialState,
  on(loadUsersSuccess, (state, { users }) =>
    userAdapter.setAll(users, { ...state, loading: false })
  ),
  on(addUserSuccess, (state, { user }) =>
    userAdapter.addOne(user, state)
  ),
  on(updateUserSuccess, (state, { user }) =>
    userAdapter.upsertOne(user, state)
  ),
  on(deleteUserSuccess, (state, { id }) =>
    userAdapter.removeOne(id, state)
  ),
);

// Built-in selectors from adapter:
export const {
  selectAll: selectAllUsers,
  selectEntities: selectUserEntities,
  selectIds: selectUserIds,
  selectTotal: selectUserCount,
} = userAdapter.getSelectors(selectUsersState);

import { createAction, props } from '@ngrx/store';

// Action with typed payload
export const updateUserProfile = createAction(
  '[User Profile] Update Profile',
  props<{
    userId: string;
    changes: Partial<UserProfile>;
    source: 'form' | 'api';
  }>()
);

// Type-safe dispatch:
this.store.dispatch(updateUserProfile({
  userId: 'user_123',
  changes: { name: 'John', email: 'john@example.com' },
  source: 'form',
}));
// TypeScript error if props don't match the type

// Action without payload:
export const clearCart = createAction('[Cart] Clear Cart');
this.store.dispatch(clearCart());  // no argument needed

// Accessing payload in reducer:
on(updateUserProfile, (state, { userId, changes, source }) => ({
  ...state,
  users: state.users.map(u => u.id === userId ? { ...u, ...changes } : u),
})),