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

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

F5781435bf6dbab3cbbe791111383cf1?s=47 Yannick Baron
November 03, 2021

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

F5781435bf6dbab3cbbe791111383cf1?s=128

Yannick Baron

November 03, 2021
Tweet

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