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



ngxs - state management made simple


Jecelyn Yeen

January 10, 2019


  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

  5. None
  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

  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

  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