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

Daniel Sogl • Software architect @ Thinktecture AG • Focus: Angular, Capacitor and AI-Coding • Socials: https://linktr.ee/daniel_sogl About me

• 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 defector 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 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

• 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

No content