@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.

Transcript

1. @ngrx/component-store Yannick Baron @yannick_baron Software Architecture Consultant Reactive state on component level
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. • 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
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. • 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?
6. • 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
7. • 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?
8. • State (Store) • Selector • Action • Reducer • Effect @ngrx/store concepts https://ngrx.io/guide/store
9. • State (Store) • Selector • Action • Reducer • Effect 
 • @ngrx/component-store @ngrx/store concepts https://ngrx.io/guide/store COMPONENT-STORE
10. @ngrx/component-store COMPONENT-STORE • State (Store) • Selector • Action + Reducer => Updater • Effect
11. • service extends base class • service provided in component • super() to initialise Setting up the ComponentStore
12. • 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
13. • state$ • setState() • patchState() Accessing the state directly
14. • Filtering / Sorting • Optimistic Updates • Split into multiple ComponentStores • Connect to @ngrx/store via Selectors Further Topics
15. • 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
16. It's a wrap! @yannick_baron yannick.baron@thinktecture.com