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
83
NgRx Signal Store
Rainer Hahnekamp
February 29, 2024
Tweet
Share
More Decks by Rainer Hahnekamp
See All by Rainer Hahnekamp
Towards Modern Change Detection
rainerhahnekamp
0
260
Cypress or Playwright?
rainerhahnekamp
0
200
Powerduo Nx and Sheriff
rainerhahnekamp
0
66
NgRx Signal Store
rainerhahnekamp
0
190
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
79
Match Made in Heaven: NgRx SignalStore
rainerhahnekamp
0
36
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Designing for humans not robots
tammielis
247
25k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
BBQ
matthewcrist
80
8.8k
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