Hold the Line! SignalStore aligned with Angular’s latest Angular Architects RainerHahnekamp 

About Me... https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff ● Rainer Hahnekamp ANGULARarchitects.io NgRx Team (Trusted Collaborator) ● Developer / Trainer / Speaker @RainerHahnekamp Workshops NgRx • Testing • Spring • Quality 

Agenda ● The Importance of State ● Why SignalStore ● How do we work? ● Where are we? ● What comes next? 

I don't need State! (traumatized devs) 

State is the essence of SPAs 

The Angular Way From Events to State 

a b c d e State Events (Observables, Callbacks) "Event-based" Change Detection / Synchronization (zone.js) No State-Changing Events 

a b c d e State (Signals) Events (Observables, Callbacks) "State-based" Change Detection / Synchronization (Signals) 

Angular's "State Management" Stable signal() computed() effect() afterRenderEffect() linkedSignal() Experimental resource() 

You need to manage State, but do you need an Explicit Library? 

RainerHahnekamp Benefits SignalStore Extensible Simple Standardized Utility Functions Always based on Angular's Signals 

A Comparison: State & Slices @Injectable({ providedIn: 'root' }) export class HolidaysStore { // State readonly #state = signal({ holidays: [] as Holiday[], favouriteIds: [] as number[], filter: { query: '', type: 0 }, }); // Slices holidays = computed(() => this.#state().holidays); favouriteIds = computed(() => this.#state().favouriteIds); filter = computed(() => this.#state().filter); } export const HolidayStore = signalStore( { providedIn: 'root' }, withState({ holidays: [] as Holiday[], favouriteIds: [] as number[], filter: { query: '', type: 0 }, }) ); 

A Comparison: Computeds export class HolidaysStore { // Computed holidaysCount = computed(() => this.#state().holidays.length); } export const HolidayStore = signalStore( withComputed(({ holidays }) => ({ holidaysCount: () => holidays().length, })), ); 

A Comparison: Methods export class HolidaysStore { // Methods readonly #httpClient = inject(HttpClient); async load() { const holidays = await lastValueFrom( this.#httpClient.get('/holiday'), ); this.#state.update((state) => ({ ...state, holidays })); } } export const HolidayStore = signalStore( withMethods((store, httpClient = inject(HttpClient)) => ({ async load() { const holidays = await lastValueFrom( httpClient.get('/holiday'), ); patchState(store, { holidays }); }, })) ); 

Hold the Line ● Built on top of Angular Signals ○ Not create a parallel universe ● Work closely with the Angular Team ○ No Plan for a full State Management ● Adapt whenever necessary ● Don't break things ○ Careful Design (takes longer) ○ Migrations ○ Don't provide too much 

● Stable Version ● Features for "larger" Stores ○ Protected State ○ Encapsulation ○ Overriding Warning Version 18 

Version 19 ● signalMethod ○ RxJS-less connector ○ Explicit Tracking ● withProps ○ Generic Feature for adding non-standardized elements ○ Not a state, method or computed ● withFeature ○ For Library Authors ○ Allows Custom Features to access the calling Store ● Events Plugin ○ Optionals ○ Redux for the SignalStore ○ Minor Differences to @ngrx/store ○ "One size fits all" Solution 

Version 20 ● Support for linkedSignal ○ Via withLinkedState ○ Per Slice (not the whole State) ○ Also supports user-defined Signals ● Support for resource/rxResource/httpResource ○ PR available but on hold ○ resource needs to be developer preview ○ Implementation available via ngrx-toolkit 

Where are we going? 

withResource() ● Writable only internally, read only to the outside ● SignalStore as Resource ● Named Resources ○ Along mapper functions ● Further Investigation for withEntities integration 

No content

NgRx Toolkit Mutations ● Resource for "Changing Data" ● Potential upcoming feature for Angular ● Design Consultations with ○ Alex Rickabaugh (Angular Core) ○ Marko Staminirovic (NgRx) ● "Mutation Mindset" ● Usable outside the SignalStore 

Upcoming AngularArchitects NgRx Workshop https://www.angulararchitects.io/training/ professional-ngrx-advanced-state-management-workshop/