Skip to content

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

Copyright © MSG Systems Romania AI Labs