SlideShare a Scribd company logo

NgRx Store - Tips for Better Code Hygiene

M
MarkoStanimirovic1

The document provides tips for better code hygiene when using NgRx Store. The tips include putting global state in a single place in the store, using selectors to derive state, creating reusable reducers, treating actions as unique events, grouping actions by source, and not dispatching actions conditionally based on state. Examples are given for implementing these tips such as extracting derived state to selectors, listening to multiple actions in reducers, naming actions consistently, and dispatching load actions from effects instead of components.

Software
1 of 69
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
NgRx Store - Tips for Better Code Hygiene Marko Stanimiroviฤ‡
Marko Stanimiroviฤ‡ @MarkoStDev โ˜… Sr. Frontend Engineer at JobCloud โ˜… NgRx Team Member โ˜… Angular Belgrade Organizer โ˜… Hobby Musician โ˜… M.Sc. in Software Engineering
@ngrx/effects @ngrx/store
@ngrx/effects @ngrx/store
โ˜… Put global state in a single place โ˜… Use selectors for derived state โ˜… Create reusable reducers โ˜… Treat actions as unique events โ˜… Group actions by source โ˜… Donโ€™t dispatch actions conditionally Store Tips
โ˜… Put global state in a single place โ˜… Use selectors for derived state โ˜… Create reusable reducers โ˜… Treat actions as unique events โ˜… Group actions by source โ˜… Donโ€™t dispatch actions conditionally Store Tips
Keep the NgRx Store as the only source of global state.
SongsComponent songsWithComposers$ =
SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsComponent songsWithComposers$ =
SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsComponent songsWithComposers$ = NgRx Store composers: { entities: Dictionary<Composer>; };
SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsComponent songsWithComposers$ = combineLatest([ ]) NgRx Store composers: { entities: Dictionary<Composer>; };
SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsComponent songsWithComposers$ = combineLatest([ this.songsService.songs$, ]) NgRx Store composers: { entities: Dictionary<Composer>; };
SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsComponent songsWithComposers$ = combineLatest([ this.songsService.songs$, this.store.select(selectComposers), ]) NgRx Store composers: { entities: Dictionary<Composer>; };
SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsComponent songsWithComposers$ = combineLatest([ this.songsService.songs$, this.store.select(selectComposers), ]).pipe( map(([songs, composers]) => songs.map((song) => ({ ==.song, composer: composers[song.composerId], })) ) ); NgRx Store composers: { entities: Dictionary<Composer>; };
SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsFacade songsWithComposers$ = NgRx Store composers: { entities: Dictionary<Composer>; }; SongsComponent songsWithComposers$ =
SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsFacade songsWithComposers$ = combineLatest([ this.songsService.songs$, this.store.select(selectComposers), ]).pipe( map(([songs, composers]) => songs.map((song) => ({ ==.song, composer: composers[song.composerId], })) ) ); NgRx Store composers: { entities: Dictionary<Composer>; }; SongsComponent songsWithComposers$ =
SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsFacade songsWithComposers$ = combineLatest([ this.songsService.songs$, this.store.select(selectComposers), ]).pipe( map(([songs, composers]) => songs.map((song) => ({ ==.song, composer: composers[song.composerId], })) ) ); NgRx Store composers: { entities: Dictionary<Composer>; }; SongsComponent songsWithComposers$ = this.facade.songsWithComposers$;
SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsFacade songsWithComposers$ = combineLatest([ this.songsService.songs$, this.store.select(selectComposers), ]).pipe( map(([songs, composers]) => songs.map((song) => ({ ==.song, composer: composers[song.composerId], })) ) ); NgRx Store composers: { entities: Dictionary<Composer>; }; SongsComponent songsWithComposers$ = this.facade.songsWithComposers$;
NgRx Store songs: { entities: Dictionary<Song>; activeId: string | null; }; composers: { entities: Dictionary<Composer>; };
NgRx Store songs: { entities: Dictionary<Song>; activeId: string | null; }; composers: { entities: Dictionary<Composer>; }; songs.selectors.ts const selectSongsWithComposers =
NgRx Store songs: { entities: Dictionary<Song>; activeId: string | null; }; composers: { entities: Dictionary<Composer>; }; songs.selectors.ts const selectSongsWithComposers = createSelector( selectAllSongs, );
NgRx Store songs: { entities: Dictionary<Song>; activeId: string | null; }; composers: { entities: Dictionary<Composer>; }; songs.selectors.ts const selectSongsWithComposers = createSelector( selectAllSongs, selectComposers, );
NgRx Store songs: { entities: Dictionary<Song>; activeId: string | null; }; composers: { entities: Dictionary<Composer>; }; songs.selectors.ts const selectSongsWithComposers = createSelector( selectAllSongs, selectComposers, (songs, composers) => songs.map((song) => ({ ==.song, composer: composers[song.composerId], })) );
NgRx Store songs: { entities: Dictionary<Song>; activeId: string | null; }; composers: { entities: Dictionary<Composer>; }; songs.selectors.ts const selectSongsWithComposers = createSelector( selectAllSongs, selectComposers, (songs, composers) => songs.map((song) => ({ ==.song, composer: composers[song.composerId], })) ); SongsComponent songsWithComposers$ = this.store.select(selectSongsWithComposers);
โ˜… Put global state in a single place โ˜… Use selectors for derived state โ˜… Create reusable reducers โ˜… Treat actions as unique events โ˜… Group actions by source โ˜… Donโ€™t dispatch actions conditionally Store Tips
Don't put the derived state in the store.
export const musiciansReducer = createReducer( on(musiciansPageActions.search, (state, { query }) => { const filteredMusicians = state.musicians.filter(({ name }) => name.includes(query) ); return { ==.state, query, filteredMusicians, }; }) );
export const musiciansReducer = createReducer( on(musiciansPageActions.search, (state, { query }) => { const filteredMusicians = state.musicians.filter(({ name }) => name.includes(query) ); return { ==.state, query, filteredMusicians, }; }) );
export const selectFilteredMusicians = createSelector( selectAllMusicians, selectMusicianQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) );
export const selectFilteredMusicians = createSelector( selectAllMusicians, selectMusicianQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) );
export const selectFilteredMusicians = createSelector( selectAllMusicians, selectMusicianQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) );
export const selectFilteredMusicians = createSelector( selectAllMusicians, selectMusicianQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) );
export const selectFilteredMusicians = createSelector( selectAllMusicians, selectMusicianQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) ); export const musiciansReducer = createReducer( on(musiciansPageActions.search, (state, { query }) => ({ ==.state, query, })) );
โ˜… Put global state in a single place โ˜… Use selectors for derived state โ˜… Create reusable reducers โ˜… Treat actions as unique events โ˜… Group actions by source โ˜… Donโ€™t dispatch actions conditionally Store Tips
Case reducers can listen to multiple actions.
export const composersReducer = createReducer( initialState, on( composerExistsGuardActions.canActivate, composersPageActions.opened, songsPageActions.opened, (state) => ({ ==.state, isLoading: true }) ) );
export const composersReducer = createReducer( initialState, on( composerExistsGuardActions.canActivate, composersPageActions.opened, songsPageActions.opened, (state) => ({ ==.state, isLoading: true }) ) );
export const composersReducer = createReducer( initialState, on( composerExistsGuardActions.canActivate, composersPageActions.opened, songsPageActions.opened, (state, action) => action.type === composerExistsGuardActions.canActivate.type =& state.entities[action.composerId] ? state : { ==.state, isLoading: true } ) );
export const composersReducer = createReducer( initialState, on(composersPageActions.opened, songsPageActions.opened, (state) => ({ ==.state, isLoading: true, })), on(composerExistsGuardActions.canActivate, (state, { composerId }) => state.entities[composerId] ? state : { ==.state, isLoading: true } ) );
export const composersReducer = createReducer( initialState, on(composersPageActions.opened, songsPageActions.opened, (state) => ({ ==.state, isLoading: true, })), on(composerExistsGuardActions.canActivate, (state, { composerId }) => state.entities[composerId] ? state : { ==.state, isLoading: true } ) );
โ˜… Put global state in a single place โ˜… Use selectors for derived state โ˜… Create reusable reducers โ˜… Treat actions as unique events โ˜… Group actions by source โ˜… Donโ€™t dispatch actions conditionally Store Tips
Donโ€™t treat actions as commands.
@Component(** **. */) export class SongsComponent implements OnInit { readonly songs$ = this.store.select(selectSongs); constructor(private readonly store: Store) {} ngOnInit(): void { this.store.dispatch({ type: '[Songs] Load Songs' }); } }
@Component(** **. */) export class SongsComponent implements OnInit { readonly songs$ = this.store.select(selectSongs); constructor(private readonly store: Store) {} ngOnInit(): void { this.store.dispatch({ type: '[Songs] Load Songs' }); } }
@Component(** **. */) export class SongsComponent implements OnInit { readonly songs$ = this.store.select(selectSongsWithComposers); constructor(private readonly store: Store) {} ngOnInit(): void { this.store.dispatch({ type: '[Songs] Load Songs' }); this.store.dispatch({ type: '[Composers] Load Composers' }); } }
@Component(** **. */) export class SongsComponent implements OnInit { readonly songs$ = this.store.select(selectSongsWithComposers); constructor(private readonly store: Store) {} ngOnInit(): void { this.store.dispatch({ type: '[Songs] Load Songs' }); this.store.dispatch({ type: '[Composers] Load Composers' }); } }
Don't dispatch multiple actions sequentially.
@Component(** **. */) export class SongsComponent implements OnInit { readonly songs$ = this.store.select(selectSongsWithComposers); constructor(private readonly store: Store) {} ngOnInit(): void { this.store.dispatch({ type: '[Songs Page] Opened' }); } }
Be consistent in naming actions. Use "[Source] Event" pattern.
@Component(** **. */) export class SongsComponent implements OnInit { readonly songs$ = this.store.select(selectSongsWithComposers); constructor(private readonly store: Store) {} ngOnInit(): void { this.store.dispatch({ type: '[Songs Page] Opened' }); } } source event
[Login Page] Login Form Submitted [Auth API] User Logged in Successfully [Songs Page] Opened [Songs API] Songs Loaded Successfully [Composers API] Composers Loaded Successfully
[Login Page] Login Form Submitted [Auth API] User Logged in Successfully [Songs Page] Opened [Songs API] Songs Loaded Successfully [Composers API] Composers Loaded Successfully [Auth] Login [Auth] Login Success [Songs] Load Songs [Composers] Load Composers [Songs] Load Songs Success [Composers] Load Composers Success
โ˜… Put global state in a single place โ˜… Use selectors for derived state โ˜… Create reusable reducers โ˜… Treat actions as unique events โ˜… Group actions by source โ˜… Donโ€™t dispatch actions conditionally Store Tips
Create action ๏ฌle by source.
songs-page.actions.ts export const opened = createAction('[Songs Page] Opened');
songs-page.actions.ts export const opened = createAction('[Songs Page] Opened'); export const searchSongs = createAction( '[Songs Page] Search Songs Button Clicked', props<{ query: string }>() ); export const addComposer = createAction( '[Songs Page] Add Composer Form Submitted', props<{ composer: Composer }>() );
songs-page.actions.ts export const opened = createAction('[Songs Page] Opened'); export const searchSongs = createAction( '[Songs Page] Search Songs Button Clicked', props<{ query: string }>() ); export const addComposer = createAction( '[Songs Page] Add Composer Form Submitted', props<{ composer: Composer }>() ); songs-api.actions.ts export const songsLoadedSuccess = createAction( '[Songs API] Songs Loaded Successfully', props<{ songs: Song[] }>() ); export const songsLoadedFailure = createAction( '[Songs API] Failed to Load Songs', props<{ errorMsg: string }>() );
songs-page.actions.ts export const opened = createAction('[Songs Page] Opened'); export const searchSongs = createAction( '[Songs Page] Search Songs Button Clicked', props<{ query: string }>() ); export const addComposer = createAction( '[Songs Page] Add Composer Form Submitted', props<{ composer: Composer }>() ); songs-api.actions.ts export const songsLoadedSuccess = createAction( '[Songs API] Songs Loaded Successfully', props<{ songs: Song[] }>() ); export const songsLoadedFailure = createAction( '[Songs API] Failed to Load Songs', props<{ errorMsg: string }>() ); composer-exists-guard.actions.ts export const canActivate = createAction( '[Composer Exists Guard] Can Activate Entered', props<{ composerId: string }>() );
โ˜… Put global state in a single place โ˜… Use selectors for derived state โ˜… Create reusable reducers โ˜… Treat actions as unique events โ˜… Group actions by source โ˜… Donโ€™t dispatch actions conditionally Store Tips
Don't dispatch actions conditionally based on the state value.
@Component(** **. */) export class SongsComponent implements OnInit { constructor(private readonly store: Store) {} ngOnInit(): void { this.store.select(selectSongs).pipe( tap((songs) => { if (!songs) { this.store.dispatch(songsActions.loadSongs()); } }), take(1) ).subscribe(); } }
@Component(** **. */) export class SongsComponent implements OnInit { constructor(private readonly store: Store) {} ngOnInit(): void { this.store.select(selectSongs).pipe( tap((songs) => { if (!songs) { this.store.dispatch(songsActions.loadSongs()); } }), take(1) ).subscribe(); } }
readonly loadSongsIfNotLoaded$ = createEffect(() => { return this.actions$.pipe( ofType(songsPageActions.opened), concatLatestFrom(() => this.store.select(selectSongs)), filter(([, songs]) => !songs), exhaustMap(() => { return this.songsService.getSongs().pipe( map((songs) => songsApiActions.songsLoadedSuccess({ songs })), catchError((error: { message: string }) => of(songsApiActions.songsLoadedFailure({ error })) ) ); }) ); });
readonly loadSongsIfNotLoaded$ = createEffect(() => { return this.actions$.pipe( ofType(songsPageActions.opened), concatLatestFrom(() => this.store.select(selectSongs)), filter(([, songs]) => !songs), exhaustMap(() => { return this.songsService.getSongs().pipe( map((songs) => songsApiActions.songsLoadedSuccess({ songs })), catchError((error: { message: string }) => of(songsApiActions.songsLoadedFailure({ error })) ) ); }) ); });
readonly loadSongsIfNotLoaded$ = createEffect(() => { return this.actions$.pipe( ofType(songsPageActions.opened), concatLatestFrom(() => this.store.select(selectSongs)), filter(([, songs]) => !songs), exhaustMap(() => { return this.songsService.getSongs().pipe( map((songs) => songsApiActions.songsLoadedSuccess({ songs })), catchError((error: { message: string }) => of(songsApiActions.songsLoadedFailure({ error })) ) ); }) ); });
readonly loadSongsIfNotLoaded$ = createEffect(() => { return this.actions$.pipe( ofType(songsPageActions.opened), concatLatestFrom(() => this.store.select(selectSongs)), filter(([, songs]) => !songs), exhaustMap(() => { return this.songsService.getSongs().pipe( map((songs) => songsApiActions.songsLoadedSuccess({ songs })), catchError((error: { message: string }) => of(songsApiActions.songsLoadedFailure({ error })) ) ); }) ); });
@Component(** **. */) export class SongsComponent implements OnInit { constructor(private readonly store: Store) {} ngOnInit(): void { this.store.dispatch(songsPageActions.opened()); } }
โ˜… Put global state in a single place โ˜… Use selectors for derived state โ˜… Create reusable reducers โ˜… Treat actions as unique events โ˜… Group actions by source โ˜… Donโ€™t dispatch actions conditionally Store Tips
Marko Stanimiroviฤ‡ @MarkoStDev Thank You!

More Related Content

PDF
What is systemd? Why use it? how does it work? - breizhcamp
Quentin Adam
ย 
PPTX
What is systemd? Why use it? how does it work? - devoxx france 2017
Quentin Adam
ย 
PPT
Perl่ฐƒ็”จๅพฎๅšAPIๅฎž็Žฐ่‡ชๅŠจๆŸฅ่ฏขๅบ”็ญ”
็›็ณ ้ฅถ
ย 
PPTX
Break through the serverless barriers with Durable Functions
Microsoft Tech Community
ย 
PDF
Ngrx slides
Christoffer Noring
ย 
PDF
Ngrx
๐™๐™–๐™ฉ๐™๐™ค๐™ง๐™š ๐™Ž๐™ช๐™ฌ๐™ž๐™œ๐™ฎ๐™–
ย 
PDF
Angular2 & ngrx/store: Game of States
Oren Farhi
ย 
PDF
Gerenciamento de estado no Angular com NgRx
Loiane Groner
ย 
What is systemd? Why use it? how does it work? - breizhcamp
Quentin Adam
ย 
What is systemd? Why use it? how does it work? - devoxx france 2017
Quentin Adam
ย 
Perl่ฐƒ็”จๅพฎๅšAPIๅฎž็Žฐ่‡ชๅŠจๆŸฅ่ฏขๅบ”็ญ”
็›็ณ ้ฅถ
ย 
Break through the serverless barriers with Durable Functions
Microsoft Tech Community
ย 
Ngrx slides
Christoffer Noring
ย 
Ngrx
๐™๐™–๐™ฉ๐™๐™ค๐™ง๐™š ๐™Ž๐™ช๐™ฌ๐™ž๐™œ๐™ฎ๐™–
ย 
Angular2 & ngrx/store: Game of States
Oren Farhi
ย 
Gerenciamento de estado no Angular com NgRx
Loiane Groner
ย 

Similar to NgRx Store - Tips for Better Code Hygiene (18)

PDF
Evan Schultz - Angular Camp - ng2-redux
Evan Schultz
ย 
PDF
Evan Schultz - Angular Summit - 2016
Evan Schultz
ย 
PPTX
๐€๐ง ๐ˆ๐ง๐ญ๐ž๐ซ๐š๐œ๐ญ๐ข๐ฏ๐ž ๐’๐ž๐ฌ๐ฌ๐ข๐จ๐ง ๐จ๐ง ๐€๐ง๐ ๐ฎ๐ฅ๐š๐ซ ๐๐ ๐‘๐ฑ ๐›๐ฒ ๐€๐ง๐ ๐ฎ๐ฅ๐š๐ซ ๐ƒ๐ž๐ฏ๐ž๐ฅ๐จ๐ฉ๐ฆ๐ž๐ง๐ญ ๐“๐ž๐š๐ฆ
Albiorix Technology
ย 
PDF
Getting Started with NgRx (Redux) Angular
Gustavo Costa
ย 
PDF
Angular state Management-NgRx
Knoldus Inc.
ย 
PDF
Higher-Order Components โ€” Ilya Gelman
500Tech
ย 
PPTX
Best Practices NgRx for Scaling Your Angular Application
Vagner Oliveira
ย 
PDF
Level up your NgRx game
ร–nder Ceylan
ย 
PDF
Redux Deep Dive - ReactFoo Pune 2018
Aziz Khambati
ย 
PDF
Redux data flow with angular
Gil Fink
ย 
PDF
Redux with angular 2 - workshop 2016
Nir Kaufman
ย 
PDF
Introduction to React & Redux
Boris Dinkevich
ย 
PDF
Effective Application State Management (@DevCamp2017)
Oliver Hรคger
ย 
PDF
Introduction to Redux (for Angular and React devs)
Fabio Biondi
ย 
PDF
angular fundamentals.pdf angular fundamentals.pdf
NuttavutThongjor1
ย 
PDF
angular fundamentals.pdf
NuttavutThongjor1
ย 
PDF
Angular redux
Nir Kaufman
ย 
PDF
Dumb and smart components + redux (1)
Brecht Billiet
ย 
Evan Schultz - Angular Camp - ng2-redux
Evan Schultz
ย 
Evan Schultz - Angular Summit - 2016
Evan Schultz
ย 
๐€๐ง ๐ˆ๐ง๐ญ๐ž๐ซ๐š๐œ๐ญ๐ข๐ฏ๐ž ๐’๐ž๐ฌ๐ฌ๐ข๐จ๐ง ๐จ๐ง ๐€๐ง๐ ๐ฎ๐ฅ๐š๐ซ ๐๐ ๐‘๐ฑ ๐›๐ฒ ๐€๐ง๐ ๐ฎ๐ฅ๐š๐ซ ๐ƒ๐ž๐ฏ๐ž๐ฅ๐จ๐ฉ๐ฆ๐ž๐ง๐ญ ๐“๐ž๐š๐ฆ
Albiorix Technology
ย 
Getting Started with NgRx (Redux) Angular
Gustavo Costa
ย 
Angular state Management-NgRx
Knoldus Inc.
ย 
Higher-Order Components โ€” Ilya Gelman
500Tech
ย 
Best Practices NgRx for Scaling Your Angular Application
Vagner Oliveira
ย 
Level up your NgRx game
ร–nder Ceylan
ย 
Redux Deep Dive - ReactFoo Pune 2018
Aziz Khambati
ย 
Redux data flow with angular
Gil Fink
ย 
Redux with angular 2 - workshop 2016
Nir Kaufman
ย 
Introduction to React & Redux
Boris Dinkevich
ย 
Effective Application State Management (@DevCamp2017)
Oliver Hรคger
ย 
Introduction to Redux (for Angular and React devs)
Fabio Biondi
ย 
angular fundamentals.pdf angular fundamentals.pdf
NuttavutThongjor1
ย 
angular fundamentals.pdf
NuttavutThongjor1
ย 
Angular redux
Nir Kaufman
ย 
Dumb and smart components + redux (1)
Brecht Billiet
ย 
Ad

Recently uploaded (20)

PDF
Digital Strategies for Manufacturing Companies
Virendra Rai, PMP
ย 
PPTX
Introduction to Artificial Intelligence
lohedi9363
ย 
PDF
Addressing The Cult of Project Management Tools-Why Disconnected Work is Hold...
OnePlan Solutions
ย 
PPTX
Operating system designcfffgfgggggggvggggggggg
rmskumara09
ย 
PDF
2025 Textile ERP Trends: SAP, Odoo & Oracle
Aetos Technologies
ย 
PDF
Wondershare Filmora 15 Crack With Activation Key [2025
ghrom2211g
ย 
PDF
Understanding Forklifts - TECH EHS Solution
TECH EHS Solution
ย 
PDF
Design an Analysis of Algorithms I-SECS-1021-03
DilanEscobar1
ย 
PPTX
Lecture 3: Operating Systems Introduction to Computer Hardware Systems
hci7se
ย 
PDF
System and Network Administraation Chapter 3
jaramharo
ย 
PDF
Flood Susceptibility Mapping Using Image-Based 2D-CNN Deep Learnin. Overview ...
lawrenceomai2
ย 
PDF
medical staffing services at VALiNTRY
Tiyan Grayson
ย 
PDF
Internet Downloader Manager (IDM) Crack 6.42 Build 42 Updates Latest 2025
itskinga12
ย 
PDF
SAP S4 Hana Brochure 3 (PTS SYSTEMS AND SOLUTIONS)
pts464036
ย 
PDF
Audit Checklist Design Aligning with ISO, IATF, and Industry Standards โ€” Omne...
rohnjim07
ย 
PPTX
ManageIQ - Sprint 268 Review - Slide Deck
ManageIQ
ย 
PPTX
VVF-Customer-Presentation2025-Ver1.9.pptx
blackmambaettijean
ย 
PDF
Design an Analysis of Algorithms II-SECS-1021-03
DilanEscobar1
ย 
PDF
How Creative Agencies Leverage Project Management Software.pdf
Orangescrum
ย 
PDF
Why TechBuilder is the Future of Pickup and Delivery App Development (1).pdf
TechBuilder
ย 
Digital Strategies for Manufacturing Companies
Virendra Rai, PMP
ย 
Introduction to Artificial Intelligence
lohedi9363
ย 
Addressing The Cult of Project Management Tools-Why Disconnected Work is Hold...
OnePlan Solutions
ย 
Operating system designcfffgfgggggggvggggggggg
rmskumara09
ย 
2025 Textile ERP Trends: SAP, Odoo & Oracle
Aetos Technologies
ย 
Wondershare Filmora 15 Crack With Activation Key [2025
ghrom2211g
ย 
Understanding Forklifts - TECH EHS Solution
TECH EHS Solution
ย 
Design an Analysis of Algorithms I-SECS-1021-03
DilanEscobar1
ย 
Lecture 3: Operating Systems Introduction to Computer Hardware Systems
hci7se
ย 
System and Network Administraation Chapter 3
jaramharo
ย 
Flood Susceptibility Mapping Using Image-Based 2D-CNN Deep Learnin. Overview ...
lawrenceomai2
ย 
medical staffing services at VALiNTRY
Tiyan Grayson
ย 
Internet Downloader Manager (IDM) Crack 6.42 Build 42 Updates Latest 2025
itskinga12
ย 
SAP S4 Hana Brochure 3 (PTS SYSTEMS AND SOLUTIONS)
pts464036
ย 
Audit Checklist Design Aligning with ISO, IATF, and Industry Standards โ€” Omne...
rohnjim07
ย 
ManageIQ - Sprint 268 Review - Slide Deck
ManageIQ
ย 
VVF-Customer-Presentation2025-Ver1.9.pptx
blackmambaettijean
ย 
Design an Analysis of Algorithms II-SECS-1021-03
DilanEscobar1
ย 
How Creative Agencies Leverage Project Management Software.pdf
Orangescrum
ย 
Why TechBuilder is the Future of Pickup and Delivery App Development (1).pdf
TechBuilder
ย 
Ad

NgRx Store - Tips for Better Code Hygiene

  • 1. NgRx Store - Tips for Better Code Hygiene Marko Stanimiroviฤ‡
  • 2. Marko Stanimiroviฤ‡ @MarkoStDev โ˜… Sr. Frontend Engineer at JobCloud โ˜… NgRx Team Member โ˜… Angular Belgrade Organizer โ˜… Hobby Musician โ˜… M.Sc. in Software Engineering
  • 5. โ˜… Put global state in a single place โ˜… Use selectors for derived state โ˜… Create reusable reducers โ˜… Treat actions as unique events โ˜… Group actions by source โ˜… Donโ€™t dispatch actions conditionally Store Tips
  • 6. โ˜… Put global state in a single place โ˜… Use selectors for derived state โ˜… Create reusable reducers โ˜… Treat actions as unique events โ˜… Group actions by source โ˜… Donโ€™t dispatch actions conditionally Store Tips
  • 7. Keep the NgRx Store as the only source of global state.
  • 9. SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsComponent songsWithComposers$ =
  • 10. SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsComponent songsWithComposers$ = NgRx Store composers: { entities: Dictionary<Composer>; };
  • 11. SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsComponent songsWithComposers$ = combineLatest([ ]) NgRx Store composers: { entities: Dictionary<Composer>; };
  • 12. SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsComponent songsWithComposers$ = combineLatest([ this.songsService.songs$, ]) NgRx Store composers: { entities: Dictionary<Composer>; };
  • 13. SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsComponent songsWithComposers$ = combineLatest([ this.songsService.songs$, this.store.select(selectComposers), ]) NgRx Store composers: { entities: Dictionary<Composer>; };
  • 14. SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsComponent songsWithComposers$ = combineLatest([ this.songsService.songs$, this.store.select(selectComposers), ]).pipe( map(([songs, composers]) => songs.map((song) => ({ ==.song, composer: composers[song.composerId], })) ) ); NgRx Store composers: { entities: Dictionary<Composer>; };
  • 15. SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsFacade songsWithComposers$ = NgRx Store composers: { entities: Dictionary<Composer>; }; SongsComponent songsWithComposers$ =
  • 16. SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsFacade songsWithComposers$ = combineLatest([ this.songsService.songs$, this.store.select(selectComposers), ]).pipe( map(([songs, composers]) => songs.map((song) => ({ ==.song, composer: composers[song.composerId], })) ) ); NgRx Store composers: { entities: Dictionary<Composer>; }; SongsComponent songsWithComposers$ =
  • 17. SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsFacade songsWithComposers$ = combineLatest([ this.songsService.songs$, this.store.select(selectComposers), ]).pipe( map(([songs, composers]) => songs.map((song) => ({ ==.song, composer: composers[song.composerId], })) ) ); NgRx Store composers: { entities: Dictionary<Composer>; }; SongsComponent songsWithComposers$ = this.facade.songsWithComposers$;
  • 18. SongsService songs$: Observable<Song[]>; activeSong$: Observable<Song | null>; SongsFacade songsWithComposers$ = combineLatest([ this.songsService.songs$, this.store.select(selectComposers), ]).pipe( map(([songs, composers]) => songs.map((song) => ({ ==.song, composer: composers[song.composerId], })) ) ); NgRx Store composers: { entities: Dictionary<Composer>; }; SongsComponent songsWithComposers$ = this.facade.songsWithComposers$;
  • 19. NgRx Store songs: { entities: Dictionary<Song>; activeId: string | null; }; composers: { entities: Dictionary<Composer>; };
  • 20. NgRx Store songs: { entities: Dictionary<Song>; activeId: string | null; }; composers: { entities: Dictionary<Composer>; }; songs.selectors.ts const selectSongsWithComposers =
  • 21. NgRx Store songs: { entities: Dictionary<Song>; activeId: string | null; }; composers: { entities: Dictionary<Composer>; }; songs.selectors.ts const selectSongsWithComposers = createSelector( selectAllSongs, );
  • 22. NgRx Store songs: { entities: Dictionary<Song>; activeId: string | null; }; composers: { entities: Dictionary<Composer>; }; songs.selectors.ts const selectSongsWithComposers = createSelector( selectAllSongs, selectComposers, );
  • 23. NgRx Store songs: { entities: Dictionary<Song>; activeId: string | null; }; composers: { entities: Dictionary<Composer>; }; songs.selectors.ts const selectSongsWithComposers = createSelector( selectAllSongs, selectComposers, (songs, composers) => songs.map((song) => ({ ==.song, composer: composers[song.composerId], })) );
  • 24. NgRx Store songs: { entities: Dictionary<Song>; activeId: string | null; }; composers: { entities: Dictionary<Composer>; }; songs.selectors.ts const selectSongsWithComposers = createSelector( selectAllSongs, selectComposers, (songs, composers) => songs.map((song) => ({ ==.song, composer: composers[song.composerId], })) ); SongsComponent songsWithComposers$ = this.store.select(selectSongsWithComposers);
  • 25. โ˜… Put global state in a single place โ˜… Use selectors for derived state โ˜… Create reusable reducers โ˜… Treat actions as unique events โ˜… Group actions by source โ˜… Donโ€™t dispatch actions conditionally Store Tips
  • 26. Don't put the derived state in the store.
  • 27. export const musiciansReducer = createReducer( on(musiciansPageActions.search, (state, { query }) => { const filteredMusicians = state.musicians.filter(({ name }) => name.includes(query) ); return { ==.state, query, filteredMusicians, }; }) );
  • 28. export const musiciansReducer = createReducer( on(musiciansPageActions.search, (state, { query }) => { const filteredMusicians = state.musicians.filter(({ name }) => name.includes(query) ); return { ==.state, query, filteredMusicians, }; }) );
  • 29. export const selectFilteredMusicians = createSelector( selectAllMusicians, selectMusicianQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) );
  • 30. export const selectFilteredMusicians = createSelector( selectAllMusicians, selectMusicianQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) );
  • 31. export const selectFilteredMusicians = createSelector( selectAllMusicians, selectMusicianQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) );
  • 32. export const selectFilteredMusicians = createSelector( selectAllMusicians, selectMusicianQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) );
  • 33. export const selectFilteredMusicians = createSelector( selectAllMusicians, selectMusicianQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) ); export const musiciansReducer = createReducer( on(musiciansPageActions.search, (state, { query }) => ({ ==.state, query, })) );
  • 34. โ˜… Put global state in a single place โ˜… Use selectors for derived state โ˜… Create reusable reducers โ˜… Treat actions as unique events โ˜… Group actions by source โ˜… Donโ€™t dispatch actions conditionally Store Tips
  • 35. Case reducers can listen to multiple actions.
  • 36. export const composersReducer = createReducer( initialState, on( composerExistsGuardActions.canActivate, composersPageActions.opened, songsPageActions.opened, (state) => ({ ==.state, isLoading: true }) ) );
  • 37. export const composersReducer = createReducer( initialState, on( composerExistsGuardActions.canActivate, composersPageActions.opened, songsPageActions.opened, (state) => ({ ==.state, isLoading: true }) ) );
  • 38. export const composersReducer = createReducer( initialState, on( composerExistsGuardActions.canActivate, composersPageActions.opened, songsPageActions.opened, (state, action) => action.type === composerExistsGuardActions.canActivate.type =& state.entities[action.composerId] ? state : { ==.state, isLoading: true } ) );
  • 39. export const composersReducer = createReducer( initialState, on(composersPageActions.opened, songsPageActions.opened, (state) => ({ ==.state, isLoading: true, })), on(composerExistsGuardActions.canActivate, (state, { composerId }) => state.entities[composerId] ? state : { ==.state, isLoading: true } ) );
  • 40. export const composersReducer = createReducer( initialState, on(composersPageActions.opened, songsPageActions.opened, (state) => ({ ==.state, isLoading: true, })), on(composerExistsGuardActions.canActivate, (state, { composerId }) => state.entities[composerId] ? state : { ==.state, isLoading: true } ) );
  • 41. โ˜… Put global state in a single place โ˜… Use selectors for derived state โ˜… Create reusable reducers โ˜… Treat actions as unique events โ˜… Group actions by source โ˜… Donโ€™t dispatch actions conditionally Store Tips
  • 43. @Component(** **. */) export class SongsComponent implements OnInit { readonly songs$ = this.store.select(selectSongs); constructor(private readonly store: Store) {} ngOnInit(): void { this.store.dispatch({ type: '[Songs] Load Songs' }); } }
  • 44. @Component(** **. */) export class SongsComponent implements OnInit { readonly songs$ = this.store.select(selectSongs); constructor(private readonly store: Store) {} ngOnInit(): void { this.store.dispatch({ type: '[Songs] Load Songs' }); } }
  • 45. @Component(** **. */) export class SongsComponent implements OnInit { readonly songs$ = this.store.select(selectSongsWithComposers); constructor(private readonly store: Store) {} ngOnInit(): void { this.store.dispatch({ type: '[Songs] Load Songs' }); this.store.dispatch({ type: '[Composers] Load Composers' }); } }
  • 46. @Component(** **. */) export class SongsComponent implements OnInit { readonly songs$ = this.store.select(selectSongsWithComposers); constructor(private readonly store: Store) {} ngOnInit(): void { this.store.dispatch({ type: '[Songs] Load Songs' }); this.store.dispatch({ type: '[Composers] Load Composers' }); } }
  • 47. Don't dispatch multiple actions sequentially.
  • 48. @Component(** **. */) export class SongsComponent implements OnInit { readonly songs$ = this.store.select(selectSongsWithComposers); constructor(private readonly store: Store) {} ngOnInit(): void { this.store.dispatch({ type: '[Songs Page] Opened' }); } }
  • 49. Be consistent in naming actions. Use "[Source] Event" pattern.
  • 50. @Component(** **. */) export class SongsComponent implements OnInit { readonly songs$ = this.store.select(selectSongsWithComposers); constructor(private readonly store: Store) {} ngOnInit(): void { this.store.dispatch({ type: '[Songs Page] Opened' }); } } source event
  • 51. [Login Page] Login Form Submitted [Auth API] User Logged in Successfully [Songs Page] Opened [Songs API] Songs Loaded Successfully [Composers API] Composers Loaded Successfully
  • 52. [Login Page] Login Form Submitted [Auth API] User Logged in Successfully [Songs Page] Opened [Songs API] Songs Loaded Successfully [Composers API] Composers Loaded Successfully [Auth] Login [Auth] Login Success [Songs] Load Songs [Composers] Load Composers [Songs] Load Songs Success [Composers] Load Composers Success
  • 53. โ˜… Put global state in a single place โ˜… Use selectors for derived state โ˜… Create reusable reducers โ˜… Treat actions as unique events โ˜… Group actions by source โ˜… Donโ€™t dispatch actions conditionally Store Tips
  • 55. songs-page.actions.ts export const opened = createAction('[Songs Page] Opened');
  • 56. songs-page.actions.ts export const opened = createAction('[Songs Page] Opened'); export const searchSongs = createAction( '[Songs Page] Search Songs Button Clicked', props<{ query: string }>() ); export const addComposer = createAction( '[Songs Page] Add Composer Form Submitted', props<{ composer: Composer }>() );
  • 57. songs-page.actions.ts export const opened = createAction('[Songs Page] Opened'); export const searchSongs = createAction( '[Songs Page] Search Songs Button Clicked', props<{ query: string }>() ); export const addComposer = createAction( '[Songs Page] Add Composer Form Submitted', props<{ composer: Composer }>() ); songs-api.actions.ts export const songsLoadedSuccess = createAction( '[Songs API] Songs Loaded Successfully', props<{ songs: Song[] }>() ); export const songsLoadedFailure = createAction( '[Songs API] Failed to Load Songs', props<{ errorMsg: string }>() );
  • 58. songs-page.actions.ts export const opened = createAction('[Songs Page] Opened'); export const searchSongs = createAction( '[Songs Page] Search Songs Button Clicked', props<{ query: string }>() ); export const addComposer = createAction( '[Songs Page] Add Composer Form Submitted', props<{ composer: Composer }>() ); songs-api.actions.ts export const songsLoadedSuccess = createAction( '[Songs API] Songs Loaded Successfully', props<{ songs: Song[] }>() ); export const songsLoadedFailure = createAction( '[Songs API] Failed to Load Songs', props<{ errorMsg: string }>() ); composer-exists-guard.actions.ts export const canActivate = createAction( '[Composer Exists Guard] Can Activate Entered', props<{ composerId: string }>() );
  • 59. โ˜… Put global state in a single place โ˜… Use selectors for derived state โ˜… Create reusable reducers โ˜… Treat actions as unique events โ˜… Group actions by source โ˜… Donโ€™t dispatch actions conditionally Store Tips
  • 60. Don't dispatch actions conditionally based on the state value.
  • 61. @Component(** **. */) export class SongsComponent implements OnInit { constructor(private readonly store: Store) {} ngOnInit(): void { this.store.select(selectSongs).pipe( tap((songs) => { if (!songs) { this.store.dispatch(songsActions.loadSongs()); } }), take(1) ).subscribe(); } }
  • 62. @Component(** **. */) export class SongsComponent implements OnInit { constructor(private readonly store: Store) {} ngOnInit(): void { this.store.select(selectSongs).pipe( tap((songs) => { if (!songs) { this.store.dispatch(songsActions.loadSongs()); } }), take(1) ).subscribe(); } }
  • 63. readonly loadSongsIfNotLoaded$ = createEffect(() => { return this.actions$.pipe( ofType(songsPageActions.opened), concatLatestFrom(() => this.store.select(selectSongs)), filter(([, songs]) => !songs), exhaustMap(() => { return this.songsService.getSongs().pipe( map((songs) => songsApiActions.songsLoadedSuccess({ songs })), catchError((error: { message: string }) => of(songsApiActions.songsLoadedFailure({ error })) ) ); }) ); });
  • 64. readonly loadSongsIfNotLoaded$ = createEffect(() => { return this.actions$.pipe( ofType(songsPageActions.opened), concatLatestFrom(() => this.store.select(selectSongs)), filter(([, songs]) => !songs), exhaustMap(() => { return this.songsService.getSongs().pipe( map((songs) => songsApiActions.songsLoadedSuccess({ songs })), catchError((error: { message: string }) => of(songsApiActions.songsLoadedFailure({ error })) ) ); }) ); });
  • 65. readonly loadSongsIfNotLoaded$ = createEffect(() => { return this.actions$.pipe( ofType(songsPageActions.opened), concatLatestFrom(() => this.store.select(selectSongs)), filter(([, songs]) => !songs), exhaustMap(() => { return this.songsService.getSongs().pipe( map((songs) => songsApiActions.songsLoadedSuccess({ songs })), catchError((error: { message: string }) => of(songsApiActions.songsLoadedFailure({ error })) ) ); }) ); });
  • 66. readonly loadSongsIfNotLoaded$ = createEffect(() => { return this.actions$.pipe( ofType(songsPageActions.opened), concatLatestFrom(() => this.store.select(selectSongs)), filter(([, songs]) => !songs), exhaustMap(() => { return this.songsService.getSongs().pipe( map((songs) => songsApiActions.songsLoadedSuccess({ songs })), catchError((error: { message: string }) => of(songsApiActions.songsLoadedFailure({ error })) ) ); }) ); });
  • 67. @Component(** **. */) export class SongsComponent implements OnInit { constructor(private readonly store: Store) {} ngOnInit(): void { this.store.dispatch(songsPageActions.opened()); } }
  • 68. โ˜… Put global state in a single place โ˜… Use selectors for derived state โ˜… Create reusable reducers โ˜… Treat actions as unique events โ˜… Group actions by source โ˜… Donโ€™t dispatch actions conditionally Store Tips