Match Made in Heaven: NgRx SignalStore

With the introduction of Signals, Angular became again part of the AvantGarde in the frontend world. However, some works still has to be done. The extensive Angular ecosystem with its libraries must now realign and build upon the Signals themselves.Just one week after the release of Angular 16, NgRx Signals was already on the table. But that was not all. Shortly after, the NgRx SignalStore prototype emerged, representing a complete redesign and being fully based on Signals.

In my presentation, we will take a closer look at this new store and explore what a modern, Signals-based state management can look like. Furthermore, we will discuss the implications for the already established NgRx Store.

Transcript

1. RainerHahnekamp Match Made in Heaven NgRx Signal Store Rainer Hahnekamp - 10. February 2024 - Ng-India
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 signalStore withState withMethods withComputed Signal withHooks Slices aka. DeepSignal patchState rxMethod
4. RainerHahnekamp withState({someState}) • Contains the State internally as a Signal • Exposes Signal Slices • Allows easy updates via patchState
5. RainerHahnekamp signalStore & withState({someState}) export const QuizStore = signalStore( withState({ title: '', questions: [] as Question[], timeInSeconds: 60 }) )
6. RainerHahnekamp withMethods(() => {methods}) • Adds public methods to the Store • Binds Data (State) and Logic (Methods) together • Provides Access to DI
7. RainerHahnekamp withMethods(() => {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) => ({ // ... })); } })
8. RainerHahnekamp withComputed(() => {computeds}) • Adds derived Signals • Collection of multiple computed() in one place
9. 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; }), }; })
10. 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)), ), ), }))
11. 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
12. RainerHahnekamp Try it out!
13. RainerHahnekamp Introducing NgRx Toolkit @angular-architects/ngrx-toolkit Redux DevTools Encapsulation Entities Extensions with API @ ngrx/data
14. RainerHahnekamp Further Reading and Watching https://youtu.be/TLq0OcSshYI https://youtu.be/V-D2sk_azcs
15. 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
16. RainerHahnekamp धन्यवाद् dhanyavaad