Auf Wiedersehen? 📢 Sichere dir jetzt bereits die München-2026-Tickets maximal günstig! Angular-State-Management mit NgRx Stores und Effects

Unsere Anwendungen müssen mit State auf verschiedensten Ebenen zurecht kommen.

In diesem Workshop 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. Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S https://www.linkedin.com/in/sascha-lehmann sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/    
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 defecto 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 • SignalMethod • rxMethod 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. Event: Describes an occurrence within the system. Events are dispatched to trigger state changes and/or side effects. Dispatcher: An event bus that forwards events to their corresponding handlers in the stores. Store: Contains reducers and effects that manage state and handle side effects, maintaining a clean and predictable application flow. View: Reflects state changes and dispatches new events, enabling continuous interaction between the user interface and the underlying system. NEW: SignalStore Events
27. Events NEW: SignalStore Events Alternativ:
28. Events NEW: SignalStore Events Alternativ:
29. Reducer NEW: SignalStore Events
30. Side Effects NEW: SignalStore Events
31. Dispatch Events NEW: SignalStore Events
32. Dispatch Events - injectDispatch NEW: SignalStore Events • The “injectDispatch” function reduces boilerplate code • When invoked with a dictionary of event creators, this function returns an object that reflects the structure of the event definitions
33. • 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
34. Sascha Lehmann sascha.lehmann@thinktecture.com Dankeschön!