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.

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

3. @ngrx/effects
@ngrx/store

4. @ngrx/effects
@ngrx/store

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.

8. SongsComponent
songsWithComposers$ =

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

42. Don’t treat actions as commands.

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

54. Create action file by source.

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

69. Marko Stanimirović
@MarkoStDev
Thank You!