Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
NgRx Signal Store
Search
Rainer Hahnekamp
February 29, 2024
0
110
NgRx Signal Store
Rainer Hahnekamp
February 29, 2024
Tweet
Share
More Decks by Rainer Hahnekamp
See All by Rainer Hahnekamp
Evolving Architecture
rainerhahnekamp
3
300
Microfrontends: Necessities - Implementations - Challenges
rainerhahnekamp
0
150
Zoneless Testing
rainerhahnekamp
0
170
Towards Modern Change Detection
rainerhahnekamp
0
19
Testing in 2024: A "dynamic" Situation
rainerhahnekamp
0
130
End of Barrel Files: New Modularization Techniques with Sheriff
rainerhahnekamp
0
460
ESLint: Low Hanging Fruits
rainerhahnekamp
0
410
Refactoring in Angular via Metrics, Modularity & Testing
rainerhahnekamp
0
390
Testing in 2024
rainerhahnekamp
0
340
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Six Lessons from altMBA
skipperchong
27
3.6k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Producing Creativity
orderedlist
PRO
344
39k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Rails Girls Zürich Keynote
gr2m
94
13k
How to Ace a Technical Interview
jacobian
276
23k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Transcript
RainerHahnekamp Game Changer: NgRx Signal Store Rainer Hahnekamp - 29.
February 2024 - ngOslo
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 signalStore withState withMethods withComputed Signal withHooks Slices aka. DeepSignal
patchState rxMethod
RainerHahnekamp In a Nutshell • Light-weight state management on top
of Signals • Logic and State in one Place
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(() => {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(() => {computeds}) • Adds derived Signals • Collection
of multiple computed() in one place
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; }), }; })
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)), ), ), }))
RainerHahnekamp Architectural Consequences • State Management becomes ◦ Less boilerplate
◦ Extends Signal • More Local than Global State Management • Data Module Type contains only API Services ◦ fetch/HttpClient-based Services ◦ OpenAPI
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 Introducing 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