@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
   

   View Slide

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
   

   View Slide

3. What/where is state?
   

   View Slide

4. • router state
   

   which route is active
   

   route params / query params
   

   What/where is state?
   

   View Slide

5. • router state
   

   which route is active
   

   route params / query params
   
   
   • application state
   

   active user
   

   wishlist items / noti
   fi
   cations
   

   What/where is state?
   

   View Slide

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?
   

   View Slide

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?
   

   View Slide

8. Handling state is hard
   

   View Slide

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
   
   
   

   View Slide

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?
    
    
    

    View Slide

11. Introduction to @ngrx/store
    by example
    

    View Slide

12. • router state
    

    route params / query params
    
    
    • application state
    

    list of favorites
    
    
    • component state
    

    list of entities
    

    current entity to edit
    An example Project
    

    View Slide

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

    View Slide

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

    View Slide

15. State (Store)
    

    View Slide

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)
    

    View Slide

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)
    

    View Slide

18. Selector
    

    View Slide

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
    

    View Slide

20. Action
    

    View Slide

21. • used to communicate with the store
    
    
    • can be dispatched from anywhere
    
    
    • describe unique events
    Action
    https://ngrx.io/guide/store
    

    View Slide

22. Reducer
    
    
    

    View Slide

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
    

    View Slide

24. • State (Store)
    
    
    • Selector
    
    
    • Action
    
    
    • Reducer
    Concepts so far
    https://ngrx.io/guide/store
    

    View Slide

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

    View Slide

26. • State (Store)
    
    
    • Selector
    
    
    • Action
    
    
    • Reducer
    
    
    • Effect
    
    
    • @ngrx/component-store
    @ngrx/store concepts
    https://ngrx.io/guide/store
    COMPONENT-STORE
    

    View Slide

27. Effect
    

    View Slide

28. COMPONENT-STORE
    • synchronous and asynchronous side-effects
    
    
    • react to action - dispatch an action (possibly)
    
    
    • use angular services
    Effect
    

    View Slide

29. @ngrx/component-store
    

    View Slide

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
    

    View Slide

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
    

    View Slide

32. It's a wrap!
    @yannick_baron
    
    
    yannick.baron@thinktecture.com
    

    View Slide