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
84
NgRx Signal Store
Rainer Hahnekamp
February 29, 2024
Tweet
Share
More Decks by Rainer Hahnekamp
See All by Rainer Hahnekamp
Testing Angular in 2024
rainerhahnekamp
0
7
Towards Modern Change Detection
rainerhahnekamp
0
270
Cypress or Playwright?
rainerhahnekamp
0
200
Powerduo Nx and Sheriff
rainerhahnekamp
0
68
NgRx Signal Store
rainerhahnekamp
0
200
Signals Unleashed: The Full Guide
rainerhahnekamp
0
470
Change Detection - Deep Dive
rainerhahnekamp
0
170
Basta Spring 2024 - Cypress und Playwright
rainerhahnekamp
0
300
Powerduo Nx and Sheriff
rainerhahnekamp
0
81
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Become a Pro
speakerdeck
PRO
13
4.6k
How GitHub (no longer) Works
holman
305
140k
Design by the Numbers
sachag
274
18k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Producing Creativity
orderedlist
PRO
338
39k
Why Our Code Smells
bkeepers
PRO
331
56k
How to name files
jennybc
65
94k
The Pragmatic Product Professional
lauravandoore
26
5.9k
Gamification - CAS2011
davidbonilla
77
4.6k
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