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
140
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
360
Micro Frontends: Necessity, Implementation, and Challenges
rainerhahnekamp
2
810
Software richtig testen - Ganz praktisch!
rainerhahnekamp
0
95
Quality with Angular: Tools and Processes
rainerhahnekamp
0
350
Evolving Architecture
rainerhahnekamp
3
390
Microfrontends: Necessities - Implementations - Challenges
rainerhahnekamp
0
200
Zoneless Testing
rainerhahnekamp
0
230
Towards Modern Change Detection
rainerhahnekamp
0
41
Testing in 2024: A "dynamic" Situation
rainerhahnekamp
0
210
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
What's in a price? How to price your products and services
michaelherold
246
12k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Side Projects
sachag
455
42k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Optimizing for Happiness
mojombo
379
70k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Making Projects Easy
brettharned
116
6.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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