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

@ngrx/component-store: Reaktiver State auf Komp...

@ngrx/component-store: Reaktiver State auf Komponentenebene

Unsere Applikationen müssen mit mehreren Arten von State auf verschiedenen Ebenen zurecht kommen.
In diesem Webinar dreht sich alles um den @ngrx/component-store, der gerne in den Hintergrund tritt, aber sofort in jedem reaktiven Projekt Einsatz finden kann.
In dieser Einführung werden Sie sehen, wie er funktioniert und eingesetzt wird, und warum er ein guter Ersatz für das in Angular übliche Subject-in-a-Service Pattern ist.

Yannick Baron

March 18, 2022
Tweet

More Decks by Yannick Baron

Other Decks in Programming

Transcript

  1. • user interaction 
 clicks, hovers, 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 Reactive Applications react to
  2. • user interaction 
 clicks, hovers, 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 Reactive Applications react to
  3. • router state 
 which route is active 
 route

    params / query params • application state 
 active user 
 wishlist items / noti fi cations • component state 
 game details 
 selected video 
 video playing? 
 What/where is state?
  4. • router state 
 which route is active 
 route

    params / query params • application state 
 active user 
 wishlist items / noti fi cations • component state 
 game details 
 selected video 
 video playing? 
 What/where is state?
  5. • 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 Common Concepts in advanced reactive Angular
  6. • store-like state management on component level • keeps state

    logic out of components • standardised subject in a service • stand-alone package (no other dependencies from @ngrx) • connects to @ngrx/store via selectors Why @ngrx/component-store?
  7. • State (Store) • Selector • Action • Reducer •

    Effect @ngrx/store concepts https://ngrx.io/guide/store
  8. • State (Store) • Selector • Action • Reducer •

    Effect 
 • @ngrx/component-store @ngrx/store concepts https://ngrx.io/guide/store COMPONENT-STORE
  9. • service extends base class • service provided in component

    • super() to initialise Setting up the ComponentStore
  10. • select() 
 returns Observable we can subscribe to in

    template • updater() 
 returns function to be used in component • effect() 
 returns function to be used in component Selectors / Updaters / Effects
  11. • Filtering / Sorting • Optimistic Updates • Split into

    multiple ComponentStores • Connect to @ngrx/store via Selectors Further Topics
  12. • no nested data • think about what goes into

    store and how • use component store for local state • do not duplicate state • structure your store into feature module stores • combine selectors + use selectors for transformation • rarely subscribe to selectors • use async pipe + OnPush @ngrx/store advice