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
Leveraging the new NGRX Signal Store
Search
Manfred Steyer
PRO
January 18, 2024
Programming
0
170
Leveraging the new NGRX Signal Store
Manfred Steyer
PRO
January 18, 2024
Tweet
Share
More Decks by Manfred Steyer
See All by Manfred Steyer
The New NGRX Signal Store for Angular 3+n Flavors @enterJS 2014 in Darmstadt
manfredsteyer
PRO
0
36
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
120
The New NGRX Signal Store for Angular: 3+n Flavors of the Signal Store
manfredsteyer
PRO
0
65
Micro Frontends with Modern Angular and Island Architectures @ijs London 2024
manfredsteyer
PRO
0
100
Modern State Management in Angular: 3+n Flavors of the Signal Store @ijs London 2024
manfredsteyer
PRO
0
90
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
250
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
420
Micro Frontends with Web Standards
manfredsteyer
PRO
1
320
The New NGRX Signal Store for Angular: 3+n Flavors
manfredsteyer
PRO
1
230
Other Decks in Programming
See All in Programming
敵対的ポイフル
futabato
0
140
Going beyond Apache Parquet's default settings
xhochy
0
140
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
100
『Railsオワコン』と言われる時代に、なぜブルーモ証券はRailsを選ぶのか
free_world21
1
390
WebGLで始める コンピュータグラフィックス入門
heller77
0
330
Apache Hive 4 on Treasure Data
ryukobayashi
1
440
Deep Dive into React Stream/Serialize
mugi_uno
3
730
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
Domain-Driven Transformation
hschwentner
2
1.5k
R言語の環境構築と基礎 Tokyo.R 112
bob3bob3
0
280
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
520
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
GitHub's CSS Performance
jonrohan
1025
450k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
The Mythical Team-Month
searls
217
42k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6k
Embracing the Ebb and Flow
colly
80
4.2k
Done Done
chrislema
178
15k
Music & Morning Musume
bryan
41
5.6k
Building Your Own Lightsaber
phodgson
100
5.7k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
The Language of Interfaces
destraynor
151
23k
Transcript
@ManfredSteyer ManfredSteyer Leveraging the new NGRX Signal Store
@ManfredSteyer Signal as Producer 4711 Consumer read set notify 4712
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Manfred Steyer
@ManfredSteyer
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { private
state = signalState({ from: 'Paris', to: 'London', flights: [] as Flight[], basket: {} as Record<number, boolean>, }); readonly flights = this.state.flights; readonly from = this.state.from; […] }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
readonly selected = computed( () => this.flights().filter((f) => this.basket()[f.id]) ); […] }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
updateCriteria(from: string, to: string): void { patchState(this.state, { from, to }) } […] }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
updateCriteria(from: string, to: string): void { patchState(this.state, (state) => ({ from: state.to, to: state.from })); } […] }
@ManfredSteyer @Injectable({ providedIn: 'root' }) export class FlightBookingFacade { […]
updateCriteria(from: string, to: string): void { patchState(this.state, updateRoute(from, to)); } […] } function updateRoute<T>(from: string, to: string) { return (state: T) => ({ from: to, to: from }) }
@ManfredSteyer
@ManfredSteyer export const FlightBookingStore = signalStore( { providedIn: 'root' },
[…] );
@ManfredSteyer export const FlightBookingStore = signalStore( { providedIn: 'root' },
withState({ from: 'Paris', to: 'London', […] }), […] );
@ManfredSteyer export const FlightBookingStore = signalStore( { providedIn: 'root' },
withState({ from: 'Paris', to: 'London', […] }), withComputed(([…]) => ({ […] })), withMethods(([…]) => ({ })), withHooks({ […] }) );
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer const BooksStore = signalStore( withEntities({ entity: type<Flight>(), collection: 'flight'
}), );
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer
@ManfredSteyer Michael Egger-Zikes Rainer Hahnekamp Manfred Steyer
@ManfredSteyer Free eBook (5th Edition) ANGULARarchitects.io/book Module Federation & Nx
@ManfredSteyer Services + Signals NGRX NGRX Signal Store Different Flavors
Custom Features Typed
@ManfredSteyer d Slides & Examples Remote Company Workshops and Consulting
http://angulararchitects.io