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 Component Store
Search
Rainer Hahnekamp
July 20, 2022
Technology
1
72
NgRx Component Store
Slides for my talk on NgRx Component Store
Rainer Hahnekamp
July 20, 2022
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
NgRx Signal Store
rainerhahnekamp
0
82
Basta Spring 2024 - Cypress und Playwright
rainerhahnekamp
0
300
Powerduo Nx and Sheriff
rainerhahnekamp
0
79
Other Decks in Technology
See All in Technology
中年男性がメインフレームから クラウドへキャリアシフトしてみた
uechishingo
1
460
Databricksの生成AI戦略
taka_aki
1
340
OPENLOGI Company Profile
hr01
0
45k
[2024년 5월 세미나] 생성형 AI와 함께하는 데이터 분석가 커리어
datarian
0
820
自らを知り外と繋がる、日経のエンジニア採用とDevRel活動/devreljp92
nishiuma
2
210
Taking Flight with Tailwind CSS
opdavies
0
4.3k
TypeScript の抽象構文木を用いた、数百を超える API の大規模リファクタリング戦略
yanaemon
6
1.2k
AI JIMY - 登壇(インストール編)
hanacchi
0
140
類似ロジック実装をiOS/Android間で合わせる道標No.1
fumiyasac0921
1
220
1Q86
kawaguti
PRO
2
160
ハードウェアを動かすTypeScriptの世界
9wick
3
1.1k
M5stackで使用できるpHセンサの開発
shinrinakamura
1
300
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
GraphQLとの向き合い方2022年版
quramy
33
12k
Clear Off the Table
cherdarchuk
85
310k
Git: the NoSQL Database
bkeepers
PRO
423
63k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.5k
In The Pink: A Labor of Love
frogandcode
138
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
The Cost Of JavaScript in 2023
addyosmani
21
3.9k
Thoughts on Productivity
jonyablonski
60
3.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
Building Adaptive Systems
keathley
32
1.9k
Practical Orchestrator
shlominoach
183
9.8k
Transcript
NgRx Component Store NgRx Component Store Rainer Hahnekamp 20.7.2022
About Me... • Rainer Hahnekamp ANGULARarchitects.io • Trainings and Consulting
@RainerHahnekamp Professional NgRx https://www.ng-news.com https://www.youtube.com /c/RainerHahnekamp
Agenda • NgRx Family • Theory • Selectors • Actions
• Effects • Miscellaneous
NgRx Family Store Effects Entity Data Router Store Store Devtools
Schematics ESLint Plugin Component Store Component
Main facts • (Little) sibling to @ngrx/store • Local /
component state management • State vanishes with component (by default) • Push-based • All logic included in single service
Use cases • Complicated, local state logic • Multiple instances
of same components • Different static logic (Decoupling, Shared) • ~Simplified, global state
API ComponentStore SideEffects Read Write select(): Observable patchState() setState() updater()
// like reducer effect()
Defining the state export interface HolidaysState { holidays: Holiday[]; favouriteIds:
number[]; } @Injectable() export class HolidaysStore extends ComponentStore<HolidaysState> { constructor(private httpClient: HttpClient, private config: Configuration) { super({ holidays: [], favouriteIds: [] }); } }
Selectors export interface HolidaysState { holidays: Holiday[]; favouriteIds: number[]; }
@Injectable() export class HolidaysStore extends ComponentStore<HolidaysState> { constructor(private httpClient: HttpClient, private config: Configuration) { super({ holidays: [], favouriteIds: [] }); } readonly holidays$ = this.select(({ holidays, favouriteIds }) => holidays.map((holiday) => ({ ...holiday, isFavourite: favouriteIds.includes(holiday.id), })) ); }
Using the ComponentStore @Component({ templateUrl: './holidays.component.html', standalone: true, imports: [...],
providers: [HolidaysStore], }) export class HolidaysComponent { holidays$ = this.holidaysStore.holidays$; constructor(private holidaysStore: HolidaysStore) { } }
Actions @Injectable() export class HolidaysStore extends ComponentStore<HolidaysState> { // ...
addFavourite(holidayId: number) { this.patchState((state) => ({ favouriteIds: [...state.favouriteIds, holidayId], })); } removeFavourite(holidayId: number) { this.patchState((state) => ({ favouriteIds: state.favouriteIds.filter((id) => id !== holidayId), })); } }
Using the ComponentStore @Component({ templateUrl: './holidays.component.html', standalone: true, imports: [...],
providers: [HolidaysStore], }) export class HolidaysComponent { holidays$ = this.holidaysStore.holidays$; constructor(private holidaysStore: HolidaysStore) { } addFavourite(id: number) { this.holidaysStore.addFavourite(id); } removeFavourite(id: number) { this.holidaysStore.removeFavourite(id); } }
Effects @Injectable() export class HolidaysStore extends ComponentStore<HolidaysState> { // ...
readonly load = this.effect((i$: Observable<void>) => { return i$.pipe( switchMap(() => this.httpClient.get<Holiday[]>(this.#baseUrl).pipe( tapResponse((holidays) => { const finalHolidays = holidays.map((holiday) => ({ ...holiday, imageUrl: `${this.config.baseUrl}${holiday.imageUrl}`, })); this.#setHolidays(finalHolidays); }, console.error) ) ) ); }); #setHolidays = (holidays: Holiday[]) => this.patchState({ holidays }); }
Using the ComponentStore @Component({ templateUrl: './holidays.component.html', standalone: true, imports: [...],
providers: [HolidaysStore], }) export class HolidaysComponent { holidays$ = this.holidaysStore.holidays$; constructor(private holidaysStore: HolidaysStore) { this.holidaysStore.load(); } addFavourite(id: number) { this.holidaysStore.addFavourite(id); } removeFavourite(id: number) { this.holidaysStore.removeFavourite(id); } }
Comparison to store • Same reactive behaviour • No devtools
• Scalability issues • Simpler • Nice goodies ◦ patchState ◦ Debounced selectors
Also keep in mind • Disposing of resources is built-in
• Combination with @ngrx/store possible • Can also manage global state ◦ via {providedIn: 'root'}
When to use? • Instead of services based on BehaviorSubject
• Non-global state • Early phases of application development
Alternatives Elf @rx-angular/state
Summary • Simple State Management • Reactive Behaviour • Easy
to upgrade to NgRx Store later
Further Reading/Watching • Original Design Document ◦ https://hackmd.io/zLKrFIadTMS2T6zCYGyHew?view • Official
Documentation ◦ https://ngrx.io/guide/component-store • Alex Okrushko on Component Store ◦ https://www.youtube.com/watch?v=v5WSUE1_YHM