ngxs

ngxs - state management made simple

Transcript

1. State Management Made Simple
2. @JecelynYeen - Google Developer Expert (GDE) - Blogger - Software Architect - Women Who Code KL Director - ng-MY Conference Organizer
3. state management pattern + library for Angular
4. predictable state mutations
6. Why Yet Another State Management Solution?
7. Pick your flavor!
8. Reimagine State Management for Angular
9. Reduce Boilerplate
10. Rethink Developer Ergonomic & User API
11. Getting Started ng add @ngxs/schematics https://github.com/ngxs/schematics
12. Generate 2 files: .actions.ts, .state.ts ng generate @ngxs/schematics:store --name app https://github.com/ngxs/schematics
13. Demo: Coffee https://ngxs-coffee.firebaseapp.com
14. Overview (State)
15. Overview (Actions) • [Coffee API] Get Coffee List • [List Page] Add ToCart (coffeeName) • [Cart Page] Add One Cart Item (coffeeName) • [Cart Page] Remove One Cart Item (coffeeName) • [Cart Page] Remove Cart Item (coffeeName) • [Pay Component] Empty Cart
16. Overview (Actions) GetCoffeeList AddToCart AddOne RemoveOne Remove EmptyCart
17. Overview (Selectors) Coffee List Cart List Total Amount Total Quantity
18. Overview (Selectors) • [List Page] Coffee List • [Cart Page] Cart List • [Pay Component] Total Cart Amount • [Header Component] Total Cart Quantity
19. Major NGXS Concepts Component Actions Store Plugins Backend dispatch m utate select
20. Rxjs is awesome, but is it a must?
21. Effects can be painful
22. Make use of Dependency Injection (DI)
23. Making Actions Asynchronous
24. Plugins https://ngxs.gitbook.io/ngxs/plugins/intro
25. NGXS is extendable
26. CLI Router Storage Form Logger Websocket
27. Labs https://ngxs.gitbook.io/ngxs/ngxs-labs/intro
28. Innovation without Compromising Stability
29. Emitter - Get rid of Actions (until you really need them)
30. Dispatch Decorator Immer Adapter
31. Extensive Documentation https://ngxs.gitbook.io/ngxs/
32. Do you know why it’s called NGXS? https://youtu.be/rkn73khwfWU?t=1582
33. Thanks for all contributors https://github.com/ngxs/store/graphs/contributors Austin Daniel | Mark Whitfeld | Danny Blue | Leon Radley | Max Ivanov
34. Try me! > Twitter: @JecelynYeen Slides: https://speakerdeck.com/chybie/ngxs Demo: https://github.com/chybie/ngxs-coffee Demo (Emitter): https://github.com/chybie/ngxs-coffee/tree/emitter-demo
35. Resources - Why another state management framework for Angular? - NGXS official site - ngAir Live Video Podcast about NGXS - Announcing NGXS 3.1 - Announcing NGXS 3.3