Angular - SignalStore

Entdecke die Zukunft des State Management mit NgRx Signal Store: Ein vollständig signal-basierter Ansatz, der Leichtigkeit mit Flexibilität verbindet. Diese Session bietet einen Einblick in die innovative Architektur des NgRx Signal Stores, der sich durch seine Anpassungsfähigkeit an unterschiedliche Architekturstile und Entwicklungsanforderungen auszeichnet. Erlebe anhand einer interaktiven Demo-Anwendung, wie der SignalStore nicht nur entwickelt, sondern auch erweitert werden kann, um zentrale Anforderungen effizient und konsistent zu erfüllen.
Interesse geweckt? Dann komm vorbei und sei dabei :-)

Transcript

1. Patrick Jahr • qupaya, 26.04.2024 Angular & NgRx SignalStore
2. Patrick Jahr • qupaya, 26.04.2024 What to expect? - Small comparison of the stores - Introduction of the signal store What not to expect? - Testing
3. Patrick Jahr • qupaya, 26.04.2024 Table of contents 1. NgRx Store 2. ComponentStore 3. NgRx Signals 4. SignalStore
4. Patrick Jahr • qupaya, 26.04.2024 It´s me 💻 Senior Software Engineer @ qupaya patrick.jahr@gmail.com @jahr_patrick LinkedIn
5. Patrick Jahr • qupaya, 26.04.2024 Ngrx Store Actions, Reducers and Effects Characteristics: • Type Safety • Immutability & Performance • Encapsulation • DevTools When do i use Ngrx Store? → SHARI • Shared • Hydrated • Available • Retrieved • Impacted
6. Patrick Jahr • qupaya, 26.04.2024 Component Store State, Selectors, Effects and Updaters Characteristics: • Tied to the life-cycle of a particular component and is cleaned up when that component is destroyed • Instead of reducer, available functions ◦ setState ◦ updater • Effects defined as methods with or without parameters • Performant selectors
7. Patrick Jahr • qupaya, 26.04.2024 Comparison of Store and ComponentStore Store: • Ability to trigger multiple effects/reducers • Useful DevTools • Better suited for global state handling • Single State • File Structure separated ◦ Effects ◦ Reducers ◦ Selectors ComponentStore: • Manage local state ◦ Component UI State • Multiple independent states • Single file structure ◦ effects/updaters/selectors Both: • Pushed based architecture • Work with Observables • Both has effects to handle side effects
8. Patrick Jahr • qupaya, 26.04.2024 NgRx Signals @ngrx/signals Features: • SignalStore: State-Management based on Angular Signals • SignalState: Signal based State for UI-Components and Services • RxJS-Integration: New possibility to handle side effects with the integration of RxJS. • Entity Management: Easy and performant way to handle Entity Data Collections
9. Patrick Jahr • qupaya, 26.04.2024 Signal Store Function based state, methods, hooks and more Characteristics: • Simple and Intuitive: Efficient API for Angular Signals. • Lightweight and Performant: Minimal overhead, optimal size. • Modular, Extensible, Scalable: Independent building blocks. • Type-safe: Compile-time error prevention.
10. Patrick Jahr • qupaya, 26.04.2024 DEMO
11. Patrick Jahr • qupaya, 26.04.2024 Thank you for having me!