Upgrade to Pro — share decks privately, control downloads, hide ads and more …

@ngrx/signals

 @ngrx/signals

Yannick Baron

April 02, 2024
Tweet

More Decks by Yannick Baron

Other Decks in Education

Transcript

  1. 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
  2. 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?
  3. 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
  4. Downsides of RxJS (for template rendering) Observables asynchronous by default

    AsyncPipe default null value Subscription management Recheck all template bindings No reactive inputs
  5. Enter Signals Reactive primitive Hold value, notify when value changes

    Integrated with Angular 👉 Results in knowing exactly which nodes need updating
  6. 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
  7. @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