NgRx Store - Tips For Better Code Hygiene

Transcript

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!