Download as PDF, PPTX
Reduce your Angular state options with NGXS
- 1. Reduce your Angularstate options with NGXS Yohan Lasorsa github.com/sinedied @sinedied
- 2. 1988 1997 2012 2014 2015 2018 Command-Query Separation (CQS) FunctionalReactive Programming (FRP) Elm Flux architecture (React) Redux, (few months later) NGRX, VueX NGXS (february!) State management, where does it come from?
- 4. Single source oftruth 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.
- 6. Use Redux directly (Youreally don't want to...) What about Angular?
- 7. Use NGRX It's reduxfit 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.
- 9. Born from NGRXfrustration 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 Globalstate 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 anotherstate 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