Migrate State Management to NgRx SignalStore
- Complexity: High
- Stack: Frontend
As a developer, I want to migrate the application's state management to NgRx SignalStore so that state flows are standardized, testable, and follow a predictable pattern across all features.
Description
The frontend currently manages state through Angular services that use built-in Signals directly. Each feature service (e.g., ProductService, CartService, AuthService) defines its own writable signals internally and exposes readonly signals to components. Side effects (HTTP calls, localStorage persistence) are mixed into the service methods alongside state mutations.
This story introduces NgRx SignalStore as a unified state management layer. Each feature's state is migrated from ad-hoc service signals to a dedicated Signal Store with a defined state shape, computed selectors, and store methods while preserving the existing application behavior exactly as-is.
Acceptance Criteria
- [ ] NgRx SignalStore is installed and configured in the application
- [ ] A Product Store replaces state management in
ProductService - [ ] A Cart Store replaces state management in
CartService - [ ] An Auth Store replaces state management in
AuthService - [ ] An Order Store replaces state management in the order-related services
- [ ] Each store defines an explicit state interface with loading and error properties
- [ ] Computed/derived state (e.g., cart totals, filtered product lists, auth status) uses Signal Store computed features
- [ ] Side effects (API calls, localStorage reads/writes) are handled within store methods or reactive methods - not in components
- [ ] Components inject stores directly instead of the previous services for state access
- [ ] All existing application behavior works identically after migration (product CRUD, cart, login/register, orders)
- [ ] The previous ad-hoc signal-based state logic is removed from the migrated services