angular-state-management

Use Signal services for small apps with simple shared state, ComponentStore for medium apps with component-scoped async operations, and full NgRx Store for large apps with complex cross-feature dependencies. The decision tree maps app size and state complexity to the appropriate solution.

Replace the BehaviorSubject with a writable signal, expose it publicly with asReadonly(), and change next() calls to set() or update(). Components then read state by calling the signal directly instead of subscribing to an observable.

NgRx SignalStore is a signal-based state solution built with signalStore, withState, withComputed, and withMethods. Use it for feature-scoped state that needs computed values and methods without the boilerplate of full NgRx actions, reducers, and effects.

Yes, Angular provides toSignal and toObservable from @angular/core/rxjs-interop to bridge the two paradigms. Convert route params or HTTP streams to signals for templates, or convert signals to observables when you need operators like debounceTime and switchMap.

Update the signal state immediately before the API call, then roll back to the previous state in the catch block if the request fails. Store the prior data before the optimistic mutation so it can be restored on error.

Avoid full NgRx Store for small apps or simple shared UI state like theme and user preferences, where a Signal service is sufficient. Over-globalizing state adds unnecessary boilerplate; keep state local or feature-scoped when possible.