2025-09-05_Hold_the_Line.pdf

Transcript

1. Hold the Line! SignalStore aligned with Angular’s latest Angular Architects RainerHahnekamp
2. 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
3. Agenda • The Importance of State • Why SignalStore • How do we work? • Where are we? • What comes next?
4. I don't need State! (traumatized devs)
5. State is the essence of SPAs
6. The Angular Way From Events to State
7. a b c d e State Events (Observables, Callbacks) "Event-based" Change Detection / Synchronization (zone.js) No State-Changing Events
8. a b c d e State (Signals) Events (Observables, Callbacks) "State-based" Change Detection / Synchronization (Signals)
9. Angular's "State Management" Stable signal() computed() effect() afterRenderEffect() linkedSignal() Experimental resource()
10. You need to manage State, but do you need an Explicit Library?
11. RainerHahnekamp Benefits SignalStore Extensible Simple Standardized Utility Functions Always based on Angular's Signals
12. 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 }, }) );
13. A Comparison: Computeds export class HolidaysStore { // Computed holidaysCount = computed(() => this.#state().holidays.length); } export const HolidayStore = signalStore( withComputed(({ holidays }) => ({ holidaysCount: () => holidays().length, })), );
14. A Comparison: Methods export class HolidaysStore { // Methods readonly #httpClient = inject(HttpClient); async load() { const holidays = await lastValueFrom( this.#httpClient.get<Holiday[]>('/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[]>('/holiday'), ); patchState(store, { holidays }); }, })) );
15. 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
16. • Stable Version • Features for "larger" Stores ◦ Protected State ◦ Encapsulation ◦ Overriding Warning Version 18
17. 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
18. 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
19. Where are we going?
20. withResource() • Writable only internally, read only to the outside • SignalStore as Resource<T> • Named Resources ◦ Along mapper functions • Further Investigation for withEntities integration
22. 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
23. Upcoming AngularArchitects NgRx Workshop https://www.angulararchitects.io/training/ professional-ngrx-advanced-state-management-workshop/