Pro Yearly is on sale from $80 to $50! »

Redux - NgRx v8

Redux - NgRx v8

Explanation of how the redux pattern works and a brief introduction to NgRx v8

Example: https://stackblitz.com/edit/angular-ngrx-intro

Repo: https://github.com/mahcr/angular-costa-rica-redux

8513bd393d0d86f1d297ae5a3e4a2157?s=128

Mariano Alvarez

November 20, 2019
Tweet

Transcript

  1. NgRx Reactive State Angular

  2. @malvarezcr WHO AM I? ‍

  3. @malvarezcr WHO AM I? Web Practice Lead Co-Organizador de Angular

    Costa Rica Fan de JS, TS, NG, Web Techs, Pizza, Emojis Mariano Álvarez @malvarezcr
  4. @malvarezcr BEFORE WE START https://stackblitz.com/edit/angular-ngrx-intro

  5. @malvarezcr REDUX

  6. @malvarezcr WHAT IS REDUX? “Redux is a predictable state container

    for Javascript apps.”
  7. @malvarezcr WHY REDUX?

  8. @malvarezcr WHAT IS NGRX? “NgRx is a set of RxJS-powered

    state management libraries for Angular, inspired by Redux, a popular and predictable state management container for Javascript apps.”
  9. @malvarezcr WHAT IS NGRX? + =

  10. @malvarezcr PACKAGES • Store - RxJS powered state management for

    Angular apps, inspired by Redux. • Store Devtools - Instrumentation for @ngrx/store enabling time-travel debugging. • Effects - Side effect model for @ngrx/store. • Router Store - Bindings to connect the Angular Router to @ngrx/store. • Entity - Entity State adapter for managing record collections.
  11. @malvarezcr TERMINOLOGY

  12. @malvarezcr TERMINOLOGY An action is a plain Javascript object that

    describes what happened Actions
  13. @malvarezcr TERMINOLOGY ‍♂‍♂, ‍♀ ‍♀, Actions

  14. @malvarezcr TERMINOLOGY ‍♂‍♂, ‍♀ ‍♀, Actions v8

  15. @malvarezcr TERMINOLOGY Dispatch It is the method used to dispatch

    actions and trigger state changes to the store
  16. @malvarezcr TERMINOLOGY Reducers specify how the application's state changes in

    response to actions sent to the store Reducers
  17. @malvarezcr TERMINOLOGY Previous state , New State Reducers

  18. @malvarezcr TERMINOLOGY Reducer

  19. @malvarezcr TERMINOLOGY Reducer v8

  20. @malvarezcr TERMINOLOGY Pure Functions • No side effects • Always

    return the same value e.g 2 + 2 = 4
  21. @malvarezcr TERMINOLOGY Pure Functions Impure Functions

  22. @malvarezcr TERMINOLOGY A object that holds the application state (Single

    source of truth) Store
  23. @malvarezcr TERMINOLOGY It’s an object whose state cannot be modified

    after it is created Immutability
  24. @malvarezcr TERMINOLOGY Good Bad

  25. @malvarezcr

  26. @malvarezcr WHERE DOES REDUX COME FROM?

  27. @malvarezcr FLUX

  28. @malvarezcr REDUX

  29. @malvarezcr FLUX VS REDUX Flux Redux Multiple Stores Singleton Dispatcher

    ‍♂ Mutable State Single Store ❌ No dispatcher ‍ Immutable State
  30. @malvarezcr PRINCIPLES ⚡ Single Source of Truth State is Read

    Only Store is updated by pure functions (reducers)
  31. @malvarezcr SHOULD I LEARN/USE REDUX? • Learn • Should I

    use it? 1. Size? 2. Simple? = ❌
  32. @malvarezcr PROS VS CONS Pros Cons Easier to debug Separation

    of manipulation of data form the view Maintainability / Scalability Learning curve ❌ More code to write
  33. @malvarezcr DEMO

  34. @malvarezcr CONCLUSION

  35. @malvarezcr Links • Example Stackbliz https://stackblitz.com/edit/angular-ngrx-intro • NgRx Documentation https://ngrx.io/docs

    • Twitter: @malvarezcr / Medium: @mahcr Mariano Álvarez
  36. @malvarezcr @angularcostarica @angularcr