Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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; }), }; })

Slide 20

Slide 20 text

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