Angular State Management

Manage application state with NgRx Store (Redux pattern) or NgRx SignalStore for signal-based state — choose the right tool for the complexity level

When to Use

• Sharing state across many components that are not in a direct parent-child relationship
• Tracking complex state transitions that need to be logged, replayed, or time-traveled (NgRx DevTools)
• Managing server-state with optimistic updates, loading/error states, and caching (NgRx Entity)
• Building a feature with local, self-contained state that doesn't need global visibility (SignalStore)
• Replacing ad-hoc

  BehaviorSubject

  chains that have grown hard to maintain

Instructions

NgRx Store (global state)

1. Define actions with

   createAction

   and

   props<{}>()

   — one action per user intent or server event. Namespace with

   [Feature] EventName

   convention.
2. Write pure reducers with

   createReducer

   and

   on()

   . Reducers must be pure functions — no side effects, no mutation.
3. Use

   createSelector

   for memoized state projections. Selectors compose and cache; never derive state in component templates.
4. Write effects with

   createEffect

   to handle side effects (HTTP, routing, localStorage). Effects listen to actions and dispatch new actions on success/failure.
5. Use

   createEntityAdapter

   from

   @ngrx/entity

   for normalized collections (list of records by ID). It generates standard CRUD reducers and selectors.
6. Connect components with

   store.dispatch(action)

   and

   store.select(selector)

   . Pipe the selector observable through the

   async

   pipe or convert with

   toSignal()

   .

// counter.actions.ts
import { createAction, props } from '@ngrx/store';
export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');
export const reset = createAction('[Counter] Reset', props<{ value: number }>());

// counter.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset } from './counter.actions';

export interface CounterState {
  count: number;
}
const initialState: CounterState = { count: 0 };

export const counterReducer = createReducer(
  initialState,
  on(increment, (state) => ({ ...state, count: state.count + 1 })),
  on(decrement, (state) => ({ ...state, count: state.count - 1 })),
  on(reset, (state, { value }) => ({ ...state, count: value }))
);

// counter.selectors.ts
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { CounterState } from './counter.reducer';

const selectCounterState = createFeatureSelector<CounterState>('counter');
export const selectCount = createSelector(selectCounterState, (s) => s.count);
export const selectIsZero = createSelector(selectCount, (count) => count === 0);

// products.effects.ts
import { inject } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { switchMap, map, catchError, of } from 'rxjs';
import * as ProductActions from './product.actions';
import { ProductService } from './product.service';

export const loadProducts = createEffect(
  (actions$ = inject(Actions), productService = inject(ProductService)) =>
    actions$.pipe(
      ofType(ProductActions.loadProducts),
      switchMap(() =>
        productService.getAll().pipe(
          map((products) => ProductActions.loadProductsSuccess({ products })),
          catchError((error) => of(ProductActions.loadProductsFailure({ error: error.message })))
        )
      )
    ),
  { functional: true }
);

NgRx SignalStore (local/feature state)

import { signalStore, withState, withComputed, withMethods } from '@ngrx/signals';
import { computed } from '@angular/core';
import { inject } from '@angular/core';

type CartState = { items: CartItem[]; loading: boolean };

export const CartStore = signalStore(
  { providedIn: 'root' }, // or provide in component for local scope
  withState<CartState>({ items: [], loading: false }),
  withComputed(({ items }) => ({
    totalItems: computed(() => items().length),
    totalPrice: computed(() => items().reduce((s, i) => s + i.price, 0)),
  })),
  withMethods((store, productService = inject(ProductService)) => ({
    addItem(item: CartItem) {
      patchState(store, { items: [...store.items(), item] });
    },
    async loadCart() {
      patchState(store, { loading: true });
      const items = await productService.getCart().toPromise();
      patchState(store, { items: items ?? [], loading: false });
    },
  }))
);

Details

When to use NgRx Store vs SignalStore vs Service:

signal()

Entity adapter pattern:

@ngrx/entity

{ ids: [], entities: {} }

addOne

addMany

updateOne

removeOne

getAll

getEntities

selectById

Selector memoization:

createSelector

OnPush

NgRx DevTools: Install

@ngrx/store-devtools

Action hygiene: One action per intent, not one action per state field. Actions should describe what happened (

[Cart] Item Added

[Cart] Set Items

Source

https://ngrx.io/guide/store

Process

1. Read the instructions and examples in this document.
2. Apply the patterns to your implementation, adapting to your specific context.
3. Verify your implementation against the details and edge cases listed above.

Harness Integration

• Type: knowledge — this skill is a reference document, not a procedural workflow.
• No tools or state — consumed as context by other skills and agents.

Success Criteria

• The patterns described in this document are applied correctly in the implementation.
• Edge cases and anti-patterns listed in this document are avoided.