Actions and the Store

NgRx Store implements the Redux pattern for Angular: a single immutable state tree, actions that describe changes, and pure reducer functions that produce new state.

Core Concepts

1. State — A single immutable object representing application state
2. Actions — Plain objects describing what happened
3. Reducers — Pure functions that produce new state from actions
4. Store — Holds state and dispatches actions
5. Selectors — Pure functions that derive state slices

Setting Up NgRx Store

import { provideStore } from '@ngrx/store';
import { provideStoreDevtools } from '@ngrx/store-devtools';

export const appConfig: ApplicationConfig = {
  providers: [
    provideStore(),
    provideStoreDevtools({ maxAge: 25 }),
  ],
};

Creating Actions

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

export const loadUsers = createAction('[Users Page] Load Users');

export const loadUsersSuccess = createAction(
  '[Users API] Load Users Success',
  props<{ users: User[] }>()
);

export const loadUsersFailure = createAction(
  '[Users API] Load Users Failure',
  props<{ error: string }>()
);

export const addUser = createAction(
  '[Users Page] Add User',
  props<{ user: User }>()
);

export const deleteUser = createAction(
  '[Users Page] Delete User',
  props<{ id: number }>()
);

Dispatching Actions

@Component({
  selector: 'app-user-list',
  template: `
    <button (click)="loadUsers()">Load Users</button>
    <p *ngFor="let user of users$ | async">{{ user.name }}</p>
  `,
})
export class UserListComponent {
  private store = inject(Store);
  users$ = this.store.select(state => state.users);

  loadUsers(): void {
    this.store.dispatch(loadUsers());
  }
}

Reading State with Selectors

// In a component
this.store.select(state => state.users).subscribe(users => {
  this.users = users;
});

// With async pipe
users$ = this.store.select(state => state.users);

NgRx Store DevTools integrates with the Redux DevTools browser extension for time-travel debugging.

Enabling DevTools

import { provideStoreDevtools } from '@ngrx/store-devtools';

export const appConfig: ApplicationConfig = {
  providers: [
    provideStore(),
    provideStoreDevtools({
      maxAge: 25,        // Number of actions to retain
      logOnly: false,    // Set true for production
      autoPause: true,   // Pause recording when extension is not open
    }),
  ],
};

DevTools Features

• Action log — See every dispatched action with payload
• State inspector — View current and previous state
• Time travel — Jump to any previous state
• Diff view — See exactly what changed between actions

Action Naming Conventions

// [Source] Event description
'[Users Page] Load Users'        // User initiated from page
'[Users API] Load Users Success' // API response
'[Auth Service] Login Success'   // Service event

The source in brackets indicates where the action originated. This helps debugging in DevTools.