The beauty of NgRx

Quick introduction to NgRx

Transcript

1. T H E B E A U T Y O F R E D U X A N G U L A R C O S TA R I C A
2. W H O A M I ? ! malvarezcr mah.cr
3. @angularcostarica @angularcr
4. malvarezcr mah.cr B E F O R E W E S TA R T http://tiny.cc/angular-costa-rica-redux
5. R E D U X malvarezcr mah.cr
6. malvarezcr mah.cr W H AT I S R E D U X ? Redux is a predictable state container for JavaScript apps.
7. malvarezcr mah.cr T E R M I N O L O G Y
8. malvarezcr mah.cr T E R M I N O L O G Y Pure Functions • No side effects • Always return the same value e.g 2 + 2 = 4
9. malvarezcr mah.cr T E R M I N O L O G Y Pure Functions Impure Functions
10. malvarezcr mah.cr T E R M I N O L O G Y An action is a plain JavaScript object that describes what happened Actions
11. malvarezcr mah.cr T E R M I N O L O G Y %%, & &, Actions
12. malvarezcr mah.cr T E R M I N O L O G Y Dispatch It is the method used to dispatch actions and trigger state changes to the store
13. malvarezcr mah.cr T E R M I N O L O G Y Reducers specify how the application's state changes in response to actions sent to the store Reducers
14. malvarezcr mah.cr T E R M I N O L O G Y Previous state , New State Reducers
15. malvarezcr mah.cr T E R M I N O L O G Y Reducers
16. malvarezcr mah.cr T E R M I N O L O G Y A object that holds the application state (Single source of truth) Store
17. malvarezcr mah.cr T E R M I N O L O G Y It’s an object whose state cannot be modified after it is created Immutability
18. malvarezcr mah.cr T E R M I N O L O G Y Good Bad
19. malvarezcr mah.cr W H E R E D O E S I T C O M E F R O M ?
20. malvarezcr mah.cr F L U X
21. malvarezcr mah.cr R E D U X
22. malvarezcr mah.cr F L U X V S R E D U X Flux Redux Multiple Stores Singleton Dispatcher Mutable State Single Store ❌ No dispatcher ! Immutable State
23. malvarezcr mah.cr P R I N C I P L E S ⚡ Single Source of Truth State is Read Only Store is updated by pure functions (reducers)
24. malvarezcr mah.cr S H O U L D I L E A R N / U S E R E D U X ? • Learn • Should I use it? 1. Size? 2. Simple? = ❌
25. malvarezcr mah.cr P R O S V S C O N S Pros Cons Easier to debug Separation of manipulation of data form the view 8 Easy to test Maintainability Learning curve ❌ More code to write
26. malvarezcr mah.cr N G R X
27. malvarezcr mah.cr W H AT I S N G R X ? 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.
28. malvarezcr mah.cr PA C K A G E S • 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.
29. malvarezcr mah.cr I N S TA L L • npm install @ngrx/store —save • npm install @ngrx/store-devtools —save-dev
30. malvarezcr mah.cr D E M O
31. malvarezcr mah.cr C O N C L U S I O N
32. M A R I A N O A LVA R E Z ! malvarezcr mah.cr
33. Mariano Álvarez, Febrero 2019 @angularcostarica @angularcr