Roadmap › Angular (2 → 21) › Module: Signals, Change Detection and State
Lessons in this course (16)
12. State management: services with signals, NgRx
AdvancedMediumLesson 12 of 16
- Small/medium apps: services with signals (or BehaviorSubject) exposing read-only state and methods.
- Large apps: NgRx Store (Redux pattern): Actions (events) → Reducers (pure functions producing new state) → Store (single immutable state tree) → Selectors (memoised queries); Effects handle side effects (HTTP) and dispatch new actions. Redux DevTools for time-travel debugging.
- NgRx Signal Store — lighter, signal-based store (
signalStore,withState,withComputed,withMethods).
ts
@Injectable({ providedIn: "root" })
export class CartStore {
private readonly _items = signal<CartItem[]>([]);
readonly items = this._items.asReadonly();
readonly total = computed(() => this._items().reduce((s, i) => s + i.price * i.qty, 0));
add(item: CartItem) { this._items.update(items => [...items, item]); } // immutable update
}