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
130
NgRx Signal Store
Rainer Hahnekamp
February 29, 2024
Tweet
Share
More Decks by Rainer Hahnekamp
See All by Rainer Hahnekamp
Test Fest | Angular Unit Tests Distilled
rainerhahnekamp
0
350
Micro Frontends: Necessity, Implementation, and Challenges
rainerhahnekamp
2
760
Software richtig testen - Ganz praktisch!
rainerhahnekamp
0
94
Quality with Angular: Tools and Processes
rainerhahnekamp
0
320
Evolving Architecture
rainerhahnekamp
3
380
Microfrontends: Necessities - Implementations - Challenges
rainerhahnekamp
0
200
Zoneless Testing
rainerhahnekamp
0
220
Towards Modern Change Detection
rainerhahnekamp
0
37
Testing in 2024: A "dynamic" Situation
rainerhahnekamp
0
210
Featured
See All Featured
Visualization
eitanlees
146
16k
Music & Morning Musume
bryan
46
6.6k
BBQ
matthewcrist
89
9.7k
Rails Girls Zürich Keynote
gr2m
94
14k
What's in a price? How to price your products and services
michaelherold
246
12k
Docker and Python
trallard
44
3.5k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
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