@ngrx/signals

Transcript

1. @ngrx/signals Managing state on component level Yannick Baron @yannick_baron Software Architecture Consultant
2. Reactive Applications react to user interaction clicks, hover, inputs, ... data changes receiving data (e.g. http) continuous data updates (e.g. websockets) state changes form value changes (e.g. checkbox) collapsible component settings changes
3. What/where is state? router state which route is active router params / query params application state active user wishlist items / notifications component state game details selected video video playing?
4. Common concepts in advanced reactive Angular subject in a service combining streams to deliver view model subscribing via async pipe OnPush change detection + immutability 👉 performance boost more control over change detection 👉 no unforeseen side effects by updating state from different sources
5. Downsides of RxJS (for template rendering) Observables asynchronous by default AsyncPipe default null value Subscription management Recheck all template bindings No reactive inputs
6. Enter Signals Reactive primitive Hold value, notify when value changes Integrated with Angular 👉 Results in knowing exactly which nodes need updating
7. Why @ngrx/signals? signal based state management on component level conveniently handle multiple signals brings rxjs interop to manage user interaction gracefully brings entity management out of the box extensible API through store features functional principles
8. @ngrx/signals: Whats in it? signalState small scale simple state management signalStore elaborate state management including logic patchState method to transition between states rxMethod RxJS based callable methods (ComponentStore effects) store features extend the base store with recurring features
9. Code with me? https://github.com/thinktecture/ngrx-demo Branch: signal-store/code-with-me
10. Thank You! https://www.thinktecture.com/thinktects/yannick-baron