Angular-State-Management mit NgRx Stores und Effects

Unsere Anwendungen müssen mit State auf verschiedensten Ebenen zurecht kommen. In dieser Session sehen wir uns NgRx Signals (npm: @ngrx/signals) an, das basierend auf den neuen Angular Signals das Managen von State erheblich vereinfacht. Wer mit dem NgRx ComponentStore (npm: @ngrx/component-store) vertraut ist, wird sich hier trotz der funktionalen API konzeptionell schnell zuhause fühlen. Wir wollen uns ansehen, was das neue Paket so mitbringt, darunter die Verwaltung von sychronen wie asychronen State-Updates, dem SignalStore und vieles mehr.

Transcript

1. State management with NgRx SignalStore Manage state in a reactive way Daniel Sogl @sogldaniel Softwarearchitekt
2. • Why State Management? • What is NgRx? • SignalStore • Setup • withState • withComputed • withMethods • … • Exercises • Create custom Signal Store Features • Signal Store Architecture Agenda
3. Daniel Sogl • Software architect @ Thinktecture AG • Focus: Angular, Capacitor and AI-Coding • Socials: https://linktr.ee/daniel_sogl About me
4. • Web Apps have different States • UI-State • Storage-State • Data-State • URL-State • Multiple Data Sources • Services • WebSocket • ... • Multiple Developers • Different solutions for the same problems Why State Management with Stores?
6. In Angular • No State Management • Rxjs based State Management • BehaviorSubjects • Readonly Observables • Signal Based State Management • State Management Libraries • NgRx (Redux, Component Store, Signal Store) • Ngxs • Akita • … State Management Solutions
7. • State is handled internally • Accessible trough read-only Observable • Subscription with Async-Pipe • Immutable Changes Rxjs Based Store
8. • State is handled internally • No subscription handling needed • No third-party library needed Signal Based Store
9. NgRx The defector standard in Angular • Redux Pattern in Angular • Reactive with Observables or Signals • Component Store as lightweight alternative for component-based state management
12. Lightweight Reactive State Management • Standalone Library • Signal Based • Functional Based • Extendable • Rxjs compatible • Helper Functions • SignalState • DeepComputed NgRx Signal Store
13. Installation
14. • signalStore • withState • withComputed • withMethods • withProps • withHooks • withEntities • signalStoreFeature Signal Store Methods
15. Define the Store
16. Use the Store
17. Share Dependencies • Share Injectables or other Dependencies • Can be used across the Store without the need to reinject
18. Lifecycle Hooks / Watch State
19. • Clone Repo: https://github.com/danielsogl/ngrx-signal-store-workshop • Refactor the Todo component to use a Signal Store (exercises/03-todo-store) Exercise 1
20. rxMethod • Opt-in integration with rxjs • Manges side-effects • Can be used standalone without the signal store • No manual subscription required
21. • Manage multiple Entities • Use Entity Update Functions • setEntity / setEntities • addEntity / addEntities • removeEntity / removeEntities • updateEntity / updateEntities • updateAllEntities • Access Data trough Records • Normalize State (normalizr) Entity Adapter
22. • Reusable Features • Type Safe • Atomic updates with custom update functions • https://github.com/angular- architects/ngrx-toolkit Signal Store Features
24. Exercise 2 • Refactor the Movies search to use a signal store (exercises/02-media-store) • Try out the rxMethod • Try out creating a reusable withSnackbar signal store feature
25. • Avoid global stores that share everything with everyone • Split larger stores into smaller stores • Separation of concerns • Share functionality's trough features instead of store injections Signal Store Architecture
26. • The Signal Store provides a lightweight, reactive state management solution • Build on top of Angular Signals API • Can be used on a component, feature or global level • Does not replace Redux (remember Signals are not made for handling events) • Reusable features using Signal Store Features Conclusion