Reduce your Angular state options with NGXS
- 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
- 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