Angular - Managing State with ngRx

Presentation at Cluj. RxJS powered state management for Angular applications, inspired by Redux

Transcript

1. Managing State with NgRx Explain with Coffee
3. @JecelynYeen From Kuala Lumpur, Malaysia Google Developer Expert - Web technologies, Angular Software Architect @ Randstad
4. redux pattern + + = rxjs angular ngrx
5. Seriously? Yet another tools?
6. You might not need ngRx
7. It’s ok to managing state the way you are doing now.
8. ngRx offers you a set of tools
9. Helpful when you have • complex state • multi-level component interactions • a standard way of handling state
10. Explain ngrx with coffee
11. Our app
12. Our app
13. Break them down
14. app-root app-root header router-outlet header router-outlet
15. list-page list-page pay list-page pay
16. cart-page cart-page pay cart-page pay
17. What are the state we need for this app?
18. What we want? • State across pages (components) • list-page needs to access coffeeList and cart • cart-page needs to access coffeeList and cart • State across parent/child, multi-level components • header needs to access coffeeList and cart • pay needs to access coffeeList and cart
19. What we really really want? • Single source of truth - same/consistent state across all components • Predictability - standard way of updating the state (e.g. like sql update statement), immutability / pure function
20. @ngrx/store - state, action, reducer
21. state is your single source of truth. It is just an object.
22. Our app state Initial state State after updates
23. How do we update the state?
24. By firing / dispatching actions
25. Action can be a class or an object Always with two properties: type, payload Object Class
26. Firing / dispatching action By class By object
27. Reducer - listen to the action and update state
28. Our app reducer
29. Reducer: current state + action = new state current state action new state
30. Reducer: current state + action = new state current state action new state
31. Reading the state with rxjs and store selector
32. store state is observable
33. store state can be chained (rxjs operators)
34. Component State Action dispatch Reducer sent to new state render Store
35. ngrx/store • Single source of truth • Testability • Performance • Lazy loading
36. Good stuff - @ngrx/store-devtools
37. Visualize actions Chrome extension: https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en
38. Something is missing
39. Where should I put my code to call API?
40. Reducer is synchronous
41. Option 1 - subscribe in component
42. Option 2 - introducing our spy @ngrx/effects
43. What is ngrx effects? • Imagine ngrx effects is a spy • It listen to all actions • Filter the actions that it finds useful • Then, firing / dispatching new action
44. Option 2 - ngrx effects
45. Option 2 - ngrx effects
46. Component State Action dispatch Reducer new state render sent to Effect sent to Action Store Effects service server
47. ngrx/effects • Isolate side effects from components • Handling communication outside of Angular
48. Other useful packages https://github.com/ngrx/platform
49. Full Demo https://ngrx-coffee.firebaseapp.com Code https://github.com/chybie/ngrx-coffee Slides https://speakerdeck.com/chybie/angular-managing-state-with-ngrx
50. That’s all, thank you!