Comment gérer efficacement l'état de son Application Angular? Chaque framework à aujourd'hui sa librairie de référence pour la gestion de l'état: Redux pour React, VueX pour VueJS... et pour Angular? NGRX? Non, on doit pouvoir faire mieux quand même? Découvrez NGXS, la meilleure manière de gérer son état avec Angular sans se faire des noeuds au cerveau!

1. Reduce your Angular state
options with NGXS
Yohan Lasorsa
 github.com/sinedied
 @sinedied

2. 1988
1997
2012
2014
2015
2018
Command-Query Separation (CQS)
Functional Reactive Programming (FRP)
Elm
Flux architecture (React)
Redux, (few months later) NGRX, VueX
NGXS (february!)
State management, where does it come from?

4. Single source of truth
The state of your whole application is stored in an object tree within a single store.
State is read-only
The only way to change the state is to emit an action, an object describing what
happened.
Changes are made with pure functions
To specify how the state tree is transformed by actions, you write pure reducers.
The Redux 3 principles

5. Redux data flux

6. Use Redux directly
(You really don't want to...)
What about Angular?

7. Use NGRX
It's redux fit for Angular and RxJS
With the same issues as redux
Side effects (async...) are 2nd class citizen
Without benefits from Angular patterns
It's still pure functions (no class, no DI)
No use of @annotations for actions, selectors
Boilerplate even worse than Redux
What about Angular?

8. There comes

9. Born from NGRX frustration
Spiritual descendant of ngrx-actions
The good parts
Reduced boilerplate ❤
Leverage Angular powers
Side effects are 1st class citizen
Simpler to learn and use
Young, but same (advanced) features (router, devtools, meta...) as NGRX
NGXS

10. 4 concepts
Store Global state container, action dispatcher and selector
Action Class describing the action to take and its associated metadata
State Class definition of the state
Select State slice selectors
NGXS basics

11. NGXS website
Why another state management framework for Angular?
Redux website
NGRX libs
Comprehensive Introduction to @ngrx/store
Markdown Editor variants:
Angular without state management
Angular with NGRX
Angular with NGXS
React with Rexux
Vue with VueX
Links