@ngrx/store: Einführung und erste Schritte für Angular-Entwickler

Store-Architekturen (Flux, Redux etc.) sind in aller Munde bei Frontend-Entwicklern, auch bei Angular Devs. In diesem Webinar machen wir uns vertraut mit den Konzepten, die hinter @ngrx/store stecken. An Hand einer Beispielapplikation sehen wir uns an, wie Reducer, Selectors, Actions und Effects zusammenspielen. Auch der @ngrx/component-store wird Verwendung finden.
Neben der Einführung teilt Yannick seine Erfahrungen mit dem Store-Pattern und beleuchtet dabei einige Praktiken und Fallstricke.

Transcript

1. @ngrx/store introduction by example Yannick Baron @yannick_baron Software Architecture Consultant
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. What/where is state?
4. • router state 
 which route is active 
 route params / query params 
 What/where is state?
5. • router state 
 which route is active 
 route params / query params • application state 
 active user 
 wishlist items / noti fi cations 
 What/where is state?
6. • 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?
7. • 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?
8. Handling state is hard
9. • 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
10. • standardised way to handle application state • indirection keeps components clean • Single Responsibility Principle • perfect for if your application is all about state • ideal if several data sources need to be abstracted from 
 (e.g. user change via button click, http request, websocket) • time travel debugging Why @ngrx/store?
11. Introduction to @ngrx/store by example
12. • router state 
 route params / query params • application state 
 list of favorites • component state 
 list of entities 
 current entity to edit An example Project
13. • State (Store) • Selector • Action • Reducer • Effect • @ngrx/component-store @ngrx/store concepts https://ngrx.io/guide/store
14. • State (Store) • Selector • Action • Reducer @ngrx/store concepts https://ngrx.io/guide/store
15. State (Store)
16. • single immutable data structure • de fi nes which data will be held • accessible across the whole app • can be split into feature module states State (Store)
17. • discuss what goes into the store • think about storing data ef fi ciently • avoid nested data • do not blindly put everything into the store • do not put every single property of every component there • do not duplicate state (if you need to store hundreds of entities consider the @ngrx/entity package) State (Store)
18. Selector
19. • reading from the store • pure functions to watch slice of state • combinable • feature selectors to select feature module state • can be used to transform data • use async pipe to subscribe to selects • avoid "synchronous reads" Selector https://ngrx.io/guide/store
20. Action
21. • used to communicate with the store • can be dispatched from anywhere • describe unique events Action https://ngrx.io/guide/store
22. Reducer
23. • responsible to update the state • reacts to action • synchronous, pure functions without side-effects • nested data leads to complex reducer functions • keep reducers simple Reducer
24. • State (Store) • Selector • Action • Reducer Concepts so far https://ngrx.io/guide/store
25. • State (Store) • Selector • Action • Reducer • Effect @ngrx/store concepts https://ngrx.io/guide/store
26. • State (Store) • Selector • Action • Reducer • Effect • @ngrx/component-store @ngrx/store concepts https://ngrx.io/guide/store COMPONENT-STORE
27. Effect
28. COMPONENT-STORE • synchronous and asynchronous side-effects • react to action - dispatch an action (possibly) • use angular services Effect
29. @ngrx/component-store
30. COMPONENT-STORE • store-like implementation on component level • stand-alone package • standardised subject-as-a-service • connect to store via selectors @ngrx/component-store
31. • 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
32. It's a wrap! @yannick_baron yannick.baron@thinktecture.com