RainerHahnekamp NgRx Signal Store Rainer Hahnekamp, 16. April 2024, Angular Love Meetup

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

RainerHahnekamp Based on Signals Managing larger Objects Structured Approach Extensibility Why?

RainerHahnekamp signalStore withState withMethods withComputed Signal withHooks Slices aka. DeepSignal patchState rxMethod signalStoreFeature

RainerHahnekamp signalStore withState Signal Slices aka. DeepSignal patchState Reading & Writing

RainerHahnekamp signalStore withState withMethods Signal Slices aka. DeepSignal patchState Adding Logic

RainerHahnekamp signalStore withState withMethods withComputed Signal Slices aka. DeepSignal patchState Adding Derived Values

RainerHahnekamp signalStore withState withMethods withComputed Signal withHooks Slices aka. DeepSignal patchState rxMethod Adding RxJs

RainerHahnekamp signalStore withState withMethods withComputed Signal withHooks Slices aka. DeepSignal patchState rxMethod signalStoreFeature Extending

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

RainerHahnekamp NgRx Toolkit @angular-architects/ngrx-toolkit Redux DevTools Encapsulation Entities Extensions with API @ ngrx/data

RainerHahnekamp Further Reading and Watching https://youtu.be/TLq0OcSshYI https://youtu.be/V-D2sk_azcs

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

RainerHahnekamp withState({someState}) ● Contains the State internally as a Signal ● Exposes Signal Slices ● Allows easy updates via patchState

RainerHahnekamp signalStore & withState({someState}) export const QuizStore = signalStore( withState({ title: '', questions: [] as Question[], timeInSeconds: 180 }) )

RainerHahnekamp withMethods(() => {methods}) ● Adds public methods to the Store ● Binds Data (State) and Logic (Methods) together ● Provides Access to DI

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) => ({ // ... })); } })

RainerHahnekamp withComputed((state) => ({...computeds})) ● Adds derived Signals ● Collection of multiple computed() in one place

RainerHahnekamp withComputed(() => {computeds}) withComputed((state) => { return { status: computed(() => { const status: Record = { unanswered: 0, correct: 0, incorrect: 0, }; for (const question of state.questions()) { status[question.status]++; } return status; }), }; })

RainerHahnekamp rxMethod: Integrating RxJs withMethods((store) => { const quizService = inject(QuizService); return { setId: rxMethod( pipe( switchMap((id) => quizService.findById(id)), tap((quiz) => patchState(store, quiz)), ), ), }))