State management with NgRx SignalStore Manage state in a reactive way Daniel Sogl @sogldaniel Softwarearchitekt 

• Why State Management? • What is NgRx? • SignalStore • Setup • withState • withComputed • withMethods • … • Exercises • Create custom Signal Store Features • Signal Store Architecture Agenda 

Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S https://www.linkedin.com/in/sascha-lehmann [email protected] https://www.thinktecture.com/thinktects/sascha-lehmann/     

• Web Apps have different States • UI-State • Storage-State • Data-State • URL-State • Multiple Data Sources • Services • WebSocket • ... • Multiple Developers • Different solutions for the same problems Why State Management with Stores? 

No content

In Angular • No State Management • Rxjs based State Management • BehaviorSubjects • Readonly Observables • Signal Based State Management • State Management Libraries • NgRx (Redux, Component Store, Signal Store) • Ngxs • Akita • … State Management Solutions 

• State is handled internally • Accessible trough read-only Observable • Subscription with Async-Pipe • Immutable Changes Rxjs Based Store 

• State is handled internally • No subscription handling needed • No third-party library needed Signal Based Store 

NgRx The defecto standard in Angular • Redux Pattern in Angular • Reactive with Observables or Signals • Component Store as lightweight alternative for component-based state management 

No content

No content

Lightweight Reactive State Management • Standalone Library • Signal Based • Functional Based • Extendable • Rxjs compatible • Helper Functions • SignalState • DeepComputed • SignalMethod • rxMethod NgRx Signal Store 

Installation 

• signalStore • withState • withComputed • withMethods • withProps • withHooks • withEntities • signalStoreFeature Signal Store Methods 

Define the Store 

Use the Store 

Share Dependencies • Share Injectables or other Dependencies • Can be used across the Store without the need to reinject 

Lifecycle Hooks / Watch State 

• Clone Repo: https://github.com/danielsogl/ngrx-signal-store-workshop • Refactor the Todo component to use a Signal Store (exercises/03-todo-store) Exercise 1 

rxMethod • Opt-in integration with rxjs • Manges side-effects • Can be used standalone without the signal store • No manual subscription required 

• Manage multiple Entities • Use Entity Update Functions • setEntity / setEntities • addEntity / addEntities • removeEntity / removeEntities • updateEntity / updateEntities • updateAllEntities • Access Data trough Records • Normalize State (normalizr) Entity Adapter 

• Reusable Features • Type Safe • Atomic updates with custom update functions • https://github.com/angular- architects/ngrx-toolkit Signal Store Features 

No content

Exercise 2 • Refactor the Movies search to use a signal store (exercises/02-media-store) • Try out the rxMethod • Try out creating a reusable withSnackbar signal store feature 

• Avoid global stores that share everything with everyone • Split larger stores into smaller stores • Separation of concerns • Share functionality's trough features instead of store injections Signal Store Architecture 

Event: Describes an occurrence within the system. Events are dispatched to trigger state changes and/or side effects. Dispatcher: An event bus that forwards events to their corresponding handlers in the stores. Store: Contains reducers and effects that manage state and handle side effects, maintaining a clean and predictable application flow. View: Reflects state changes and dispatches new events, enabling continuous interaction between the user interface and the underlying system. NEW: SignalStore Events 

Events NEW: SignalStore Events Alternativ: 

Events NEW: SignalStore Events Alternativ: 

Reducer NEW: SignalStore Events 

Side Effects NEW: SignalStore Events 

Dispatch Events NEW: SignalStore Events 

Dispatch Events - injectDispatch NEW: SignalStore Events • The “injectDispatch” function reduces boilerplate code • When invoked with a dictionary of event creators, this function returns an object that reflects the structure of the event definitions 

• The Signal Store provides a lightweight, reactive state management solution • Build on top of Angular Signals API • Can be used on a component, feature or global level • Does not replace Redux (remember Signals are not made for handling events) • Reusable features using Signal Store Features Conclusion 

Sascha Lehmann [email protected] Dankeschön!