Patrick Jahr • qupaya, 26.04.2024 Angular & NgRx SignalStore 

Patrick Jahr • qupaya, 26.04.2024 What to expect? - Small comparison of the stores - Introduction of the signal store What not to expect? - Testing 

Patrick Jahr • qupaya, 26.04.2024 Table of contents 1. NgRx Store 2. ComponentStore 3. NgRx Signals 4. SignalStore 

Patrick Jahr • qupaya, 26.04.2024 It´s me 💻 Senior Software Engineer @ qupaya [email protected] @jahr_patrick LinkedIn 

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 

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 

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 

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 

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. 

Patrick Jahr • qupaya, 26.04.2024 DEMO 

Patrick Jahr • qupaya, 26.04.2024 Thank you for having me!