Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
ngxs
Jecelyn Yeen
January 10, 2019
Programming
0
250
ngxs
ngxs - state management made simple
Jecelyn Yeen
January 10, 2019
Tweet
Share
More Decks by Jecelyn Yeen
See All by Jecelyn Yeen
chybie
0
410
chybie
0
1.9k
chybie
1
230
chybie
3
290
chybie
2
390
chybie
4
990
chybie
4
1.2k
chybie
0
50
chybie
0
140
Other Decks in Programming
See All in Programming
nauleyco
0
210
canon1ky
3
350
akatsukinewgrad
0
210
masayaaoyama
4
540
decoc
1
350
bkuhlmann
4
620
yokaze
0
220
taoshotaro
1
370
standfm
0
250
nrslib
20
13k
line_developers_tw
0
550
koher
6
390
Featured
See All Featured
lauravandoore
11
1.3k
chrislema
231
16k
bkeepers
52
4.1k
tammielis
237
23k
morganepeng
17
1.1k
sachag
267
17k
keithpitt
401
20k
sferik
609
54k
maggiecrowley
8
430
rasmusluckow
318
18k
productmarketing
5
660
morganepeng
92
14k
Transcript
State Management Made Simple
@JecelynYeen - Google Developer Expert (GDE) - Blogger - Software
Architect - Women Who Code KL Director - ng-MY Conference Organizer
state management pattern + library for Angular
predictable state mutations
None
Why Yet Another State Management Solution?
Pick your flavor!
Reimagine State Management for Angular
Reduce Boilerplate
Rethink Developer Ergonomic & User API
Getting Started ng add @ngxs/schematics https://github.com/ngxs/schematics
Generate 2 files: .actions.ts, .state.ts ng generate @ngxs/schematics:store --name app
https://github.com/ngxs/schematics
Demo: Coffee https://ngxs-coffee.firebaseapp.com
Overview (State)
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
Overview (Actions) GetCoffeeList AddToCart AddOne RemoveOne Remove EmptyCart
Overview (Selectors) Coffee List Cart List Total Amount Total Quantity
Overview (Selectors) • [List Page] Coffee List • [Cart Page]
Cart List • [Pay Component] Total Cart Amount • [Header Component] Total Cart Quantity
Major NGXS Concepts Component Actions Store Plugins Backend dispatch m
utate select
Rxjs is awesome, but is it a must?
Effects can be painful
Make use of Dependency Injection (DI)
Making Actions Asynchronous
Plugins https://ngxs.gitbook.io/ngxs/plugins/intro
NGXS is extendable
CLI Router Storage Form Logger Websocket
Labs https://ngxs.gitbook.io/ngxs/ngxs-labs/intro
Innovation without Compromising Stability
Emitter - Get rid of Actions (until you really need
them)
Dispatch Decorator Immer Adapter
Extensive Documentation https://ngxs.gitbook.io/ngxs/
Do you know why it’s called NGXS? https://youtu.be/rkn73khwfWU?t=1582
Thanks for all contributors https://github.com/ngxs/store/graphs/contributors Austin Daniel | Mark Whitfeld
| Danny Blue | Leon Radley | Max Ivanov
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
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