NgRx Signal Store

While Angular's embrace of Signals catapulted it back to the forefront of frontend development, it's still early days. The vast ecosystem of Angular libraries must now adjust, and leverage Signals themselves.

One area is state management. The NgRx SignalStore reimagines state management entirely with Signals at its core.

In my talk, we will look at this novel store and explore the possibilities of modern, Signals-based state management.

Transcript

1. RainerHahnekamp NgRx Signal Store Rainer Hahnekamp, 16. April 2024, Angular Love Meetup
2. RainerHahnekamp About Me... Professional NgRx https://www.youtube.com/ @RainerHahnekamp https://www.ng-news.com https://github.com/softarc-consulting/sheriff • Rainer Hahnekamp ANGULARarchitects.io • Developer / Trainer / Speaker Modern Spring for Angular @RainerHahnekamp
3. RainerHahnekamp Based on Signals Managing larger Objects Structured Approach Extensibility Why?
4. RainerHahnekamp signalStore withState withMethods withComputed Signal withHooks Slices aka. DeepSignal patchState rxMethod signalStoreFeature
5. RainerHahnekamp signalStore withState Signal Slices aka. DeepSignal patchState Reading & Writing
6. RainerHahnekamp signalStore withState withMethods Signal Slices aka. DeepSignal patchState Adding Logic
7. RainerHahnekamp signalStore withState withMethods withComputed Signal Slices aka. DeepSignal patchState Adding Derived Values
8. RainerHahnekamp signalStore withState withMethods withComputed Signal withHooks Slices aka. DeepSignal patchState rxMethod Adding RxJs
9. RainerHahnekamp signalStore withState withMethods withComputed Signal withHooks Slices aka. DeepSignal patchState rxMethod signalStoreFeature Extending
10. RainerHahnekamp Summary • Embraces (builds upon) Angular's Signal ◦ Reactivity ◦ Computed ◦ Immutability • Extends the Signal ◦ patchState ◦ Slices • Adds support for asynchronous + Signals • Optionally integrates RxJs • Brings Logic and Data in a structured way together • Highly Extensible • Provides Local and Global State
11. RainerHahnekamp NgRx Toolkit @angular-architects/ngrx-toolkit Redux DevTools Encapsulation Entities Extensions with API @ ngrx/data
12. RainerHahnekamp Further Reading and Watching https://youtu.be/TLq0OcSshYI https://youtu.be/V-D2sk_azcs
13. RainerHahnekamp Further Reading and Watching • https://ngrx.io/guide/signals • https://medium.com/ngconf/ngrx-signal-store-the-missing-piece-to-signal s-ac125d804026 • https://www.angulararchitects.io/en/blog/the-new-ngrx-signal-store-for-a ngular-2-1-flavors • https://www.youtube.com/watch?v=yaOLbKwVRtc
14. RainerHahnekamp withState({someState}) • Contains the State internally as a Signal • Exposes Signal Slices • Allows easy updates via patchState
15. RainerHahnekamp signalStore & withState({someState}) export const QuizStore = signalStore( withState({ title: '', questions: [] as Question[], timeInSeconds: 180 }) )
16. RainerHahnekamp withMethods(() => {methods}) • Adds public methods to the Store • Binds Data (State) and Logic (Methods) together • Provides Access to DI
17. RainerHahnekamp withMethods((store) => ({...methods})) withMethods((store) => { const quizService = inject(QuizService); return { answer(questionId: number, choiceId: number) { const question = store .questions() .find((question) => question.id === questionId); assertDefined(question); patchState(store, (quiz) => ({ // ... })); } })
18. RainerHahnekamp withComputed((state) => ({...computeds})) • Adds derived Signals • Collection of multiple computed() in one place
19. RainerHahnekamp withComputed(() => {computeds}) withComputed((state) => { return { status: computed(() => { const status: Record<AnswerStatus, number> = { unanswered: 0, correct: 0, incorrect: 0, }; for (const question of state.questions()) { status[question.status]++; } return status; }), }; })
20. RainerHahnekamp rxMethod: Integrating RxJs withMethods((store) => { const quizService = inject(QuizService); return { setId: rxMethod<number>( pipe( switchMap((id) => quizService.findById(id)), tap((quiz) => patchState(store, quiz)), ), ), }))