NgRx Tips for Future-Proof Angular Apps

Transcript

1. NgRx Tips for Future-Proof Angular Apps 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 ★ Use view model selectors ★ Create reusable reducers ★ Treat actions as unique events ★ Group actions by source Store Tips
6. ★ Put global state in a single place ★ Use selectors for derived state ★ Use view model selectors ★ Create reusable reducers ★ Treat actions as unique events ★ Group actions by source 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 ★ Use view model selectors ★ Create reusable reducers ★ Treat actions as unique events ★ Group actions by source 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 ★ Use view model selectors ★ Create reusable reducers ★ Treat actions as unique events ★ Group actions by source Store Tips
35. Make container components simpler.
36. musicians.component.ts @Component({ selector: 'musicians', template: ` <musician-search [query]="query$ | async">./musician-search> <musician-list [musicians]="musicians$ | async" [activeMusician]="activeMusician$ | async" >./musician-list> <musician-details [musician]="activeMusician$ | async" >./musician-details> `, }) export class MusiciansComponent { readonly musicians$ = this.store.select(selectFilteredMusicians); readonly query$ = this.store.select(selectMusiciansQuery); readonly activeMusician$ = this.store.select(selectActiveMusician); constructor(private readonly store: Store) {} }
37. musicians.component.ts @Component({ selector: 'musicians', template: ` <musician-search [query]="query$ | async">./musician-search> <musician-list [musicians]="musicians$ | async" [activeMusician]="activeMusician$ | async" >./musician-list> <musician-details [musician]="activeMusician$ | async" >./musician-details> `, }) export class MusiciansComponent { readonly musicians$ = this.store.select(selectFilteredMusicians); readonly query$ = this.store.select(selectMusiciansQuery); readonly activeMusician$ = this.store.select(selectActiveMusician); constructor(private readonly store: Store) {} }
38. musicians.component.ts @Component({ selector: 'musicians', template: ` <musician-search [query]="query$ | async">./musician-search> <musician-list [musicians]="musicians$ | async" [activeMusician]="activeMusician$ | async" >./musician-list> <musician-details [musician]="activeMusician$ | async" >./musician-details> `, }) export class MusiciansComponent { readonly musicians$ = this.store.select(selectFilteredMusicians); readonly query$ = this.store.select(selectMusiciansQuery); readonly activeMusician$ = this.store.select(selectActiveMusician); constructor(private readonly store: Store) {} }
39. musicians.component.ts @Component({ selector: 'musicians', template: ` <musician-search [query]="query$ | async">./musician-search> <musician-list [musicians]="musicians$ | async" [activeMusician]="activeMusician$ | async" >./musician-list> <musician-details [musician]="activeMusician$ | async" >./musician-details> `, }) export class MusiciansComponent { readonly musicians$ = this.store.select(selectFilteredMusicians); readonly query$ = this.store.select(selectMusiciansQuery); readonly activeMusician$ = this.store.select(selectActiveMusician); constructor(private readonly store: Store) {} }
40. musicians.component.ts @Component({ selector: 'musicians', template: ` <musician-search [query]="query$ | async">./musician-search> <musician-list [musicians]="musicians$ | async" [activeMusician]="activeMusician$ | async" >./musician-list> <musician-details [musician]="activeMusician$ | async" >./musician-details> `, }) export class MusiciansComponent { readonly musicians$ = this.store.select(selectFilteredMusicians); readonly query$ = this.store.select(selectMusiciansQuery); readonly activeMusician$ = this.store.select(selectActiveMusician); constructor(private readonly store: Store) {} } musicians.selectors.ts export const selectMusiciansPageViewModel = createSelector( );
41. musicians.component.ts @Component({ selector: 'musicians', template: ` <musician-search [query]="query$ | async">./musician-search> <musician-list [musicians]="musicians$ | async" [activeMusician]="activeMusician$ | async" >./musician-list> <musician-details [musician]="activeMusician$ | async" >./musician-details> `, }) export class MusiciansComponent { readonly musicians$ = this.store.select(selectFilteredMusicians); readonly query$ = this.store.select(selectMusiciansQuery); readonly activeMusician$ = this.store.select(selectActiveMusician); constructor(private readonly store: Store) {} } musicians.selectors.ts export const selectMusiciansPageViewModel = createSelector( selectFilteredMusicians, );
42. musicians.component.ts @Component({ selector: 'musicians', template: ` <musician-search [query]="query$ | async">./musician-search> <musician-list [musicians]="musicians$ | async" [activeMusician]="activeMusician$ | async" >./musician-list> <musician-details [musician]="activeMusician$ | async" >./musician-details> `, }) export class MusiciansComponent { readonly musicians$ = this.store.select(selectFilteredMusicians); readonly query$ = this.store.select(selectMusiciansQuery); readonly activeMusician$ = this.store.select(selectActiveMusician); constructor(private readonly store: Store) {} } musicians.selectors.ts export const selectMusiciansPageViewModel = createSelector( selectFilteredMusicians, selectMusiciansQuery, );
43. musicians.component.ts @Component({ selector: 'musicians', template: ` <musician-search [query]="query$ | async">./musician-search> <musician-list [musicians]="musicians$ | async" [activeMusician]="activeMusician$ | async" >./musician-list> <musician-details [musician]="activeMusician$ | async" >./musician-details> `, }) export class MusiciansComponent { readonly musicians$ = this.store.select(selectFilteredMusicians); readonly query$ = this.store.select(selectMusiciansQuery); readonly activeMusician$ = this.store.select(selectActiveMusician); constructor(private readonly store: Store) {} } musicians.selectors.ts export const selectMusiciansPageViewModel = createSelector( selectFilteredMusicians, selectMusiciansQuery, selectActiveMusician, );
44. musicians.component.ts @Component({ selector: 'musicians', template: ` <musician-search [query]="query$ | async">./musician-search> <musician-list [musicians]="musicians$ | async" [activeMusician]="activeMusician$ | async" >./musician-list> <musician-details [musician]="activeMusician$ | async" >./musician-details> `, }) export class MusiciansComponent { readonly musicians$ = this.store.select(selectFilteredMusicians); readonly query$ = this.store.select(selectMusiciansQuery); readonly activeMusician$ = this.store.select(selectActiveMusician); constructor(private readonly store: Store) {} } musicians.selectors.ts export const selectMusiciansPageViewModel = createSelector( selectFilteredMusicians, selectMusiciansQuery, selectActiveMusician, (musicians, query, activeMusician) .> ({ musicians, query, activeMusician, }) );
45. musicians.component.ts @Component({ selector: 'musicians', template: ` <ng-container *ngIf="vm$ | async as vm"> <musician-search [query]="vm.query">./musician-search> <musician-list [musicians]="vm.musicians" [activeMusician]="vm.activeMusician" >./musician-list> <musician-details [musician]="vm.activeMusician" >./musician-details> ./ng-container> `, }) export class MusiciansComponent { readonly vm$ = this.store.select(selectMusiciansPageViewModel); constructor(private readonly store: Store) {} } musicians.selectors.ts export const selectMusiciansPageViewModel = createSelector( selectFilteredMusicians, selectMusiciansQuery, selectActiveMusician, (musicians, query, activeMusician) .> ({ musicians, query, activeMusician, }) );
46. musicians.component.ts @Component({ selector: 'musicians', template: ` <ng-container *ngIf="vm$ | async as vm"> <musician-search [query]="vm.query">./musician-search> <musician-list [musicians]="vm.musicians" [activeMusician]="vm.activeMusician" >./musician-list> <musician-details [musician]="vm.activeMusician" >./musician-details> ./ng-container> `, }) export class MusiciansComponent { readonly vm$ = this.store.select(selectMusiciansPageViewModel); constructor(private readonly store: Store) {} } musicians.selectors.ts export const selectMusiciansPageViewModel = createSelector( selectFilteredMusicians, selectMusiciansQuery, selectActiveMusician, (musicians, query, activeMusician) .> ({ musicians, query, activeMusician, }) );
47. musicians.component.ts @Component({ selector: 'musicians', template: ` <ng-container *ngIf="vm$ | async as vm"> <musician-search [query]="vm.query">./musician-search> <musician-list [musicians]="vm.musicians" [activeMusician]="vm.activeMusician" >./musician-list> <musician-details [musician]="vm.activeMusician" >./musician-details> ./ng-container> `, }) export class MusiciansComponent { readonly vm$ = this.store.select(selectMusiciansPageViewModel); constructor(private readonly store: Store) {} } musicians.selectors.ts export const selectMusiciansPageViewModel = createSelector( selectFilteredMusicians, selectMusiciansQuery, selectActiveMusician, (musicians, query, activeMusician) .> ({ musicians, query, activeMusician, }) );
48. ★ Put global state in a single place ★ Use selectors for derived state ★ Use view model selectors ★ Create reusable reducers ★ Treat actions as unique events ★ Group actions by source Store Tips
49. Case reducers can listen to multiple actions.
50. export const composersReducer = createReducer( initialState, on( composerExistsGuardActions.canActivate, composersPageActions.opened, songsPageActions.opened, (state) .> ({ ...state, isLoading: true }) ) );
51. export const composersReducer = createReducer( initialState, on( composerExistsGuardActions.canActivate, composersPageActions.opened, songsPageActions.opened, (state) .> ({ ...state, isLoading: true }) ) );
52. 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 } ) );
53. 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 } ) );
54. 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 } ) );
55. ★ Put global state in a single place ★ Use selectors for derived state ★ Use view model selectors ★ Create reusable reducers ★ Treat actions as unique events ★ Group actions by source Store Tips
56. Don’t treat actions as commands.
57. @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' }); } }
58. @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' }); } }
59. @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' }); } }
60. @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' }); } }
61. Don't dispatch multiple actions sequentially.
62. @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' }); } }
63. Be consistent in naming actions. Use "[Source] Event" pattern.
64. @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
65. [Login Page] Login Form Submitted [Auth API] User Logged in Successfully [Songs Page] Opened [Songs API] Songs Loaded Successfully [Composers API] Composers Loaded Successfully
66. [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
67. ★ Put global state in a single place ★ Use selectors for derived state ★ Use view model selectors ★ Create reusable reducers ★ Treat actions as unique events ★ Group actions by source Store Tips
68. Create action file by source.
69. songs-page.actions.ts export const opened = createAction('[Songs Page] Opened');
70. 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 }>() );
71. 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 }>() );
72. 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 }>() );
73. ★ Put global state in a single place ★ Use selectors for derived state ★ Use view model selectors ★ Create reusable reducers ★ Treat actions as unique events ★ Group actions by source Store Tips
74. @ngrx/effects @ngrx/store
75. ★ Name effects like functions ★ Keep effects simple ★ Don’t create “boiler” effects ★ Apply good action hygiene Effects Tips
76. ★ Name effects like functions ★ Keep effects simple ★ Don’t create “boiler” effects ★ Apply good action hygiene Effects Tips
77. Don’t name effects based on the action they are listening to.
78. readonly composerAddedSuccess$ = createEffect( () .> { return this.actions$.pipe( ofType(composersApiActions.composerAddedSuccess), tap(() .> this.alert.success('Composer saved successfully!')) ); }, { dispatch: false } );
79. readonly composerAddedSuccess$ = createEffect( () .> { return this.actions$.pipe( ofType(composersApiActions.composerAddedSuccess), tap(() .> this.alert.success('Composer saved successfully!')) ); }, { dispatch: false } );
80. readonly showSaveComposerSuccessAlert$ = createEffect( () .> { return this.actions$.pipe( ofType(composersApiActions.composerAddedSuccess), tap(() .> this.alert.success('Composer saved successfully!')) ); }, { dispatch: false } );
81. readonly showSaveComposerSuccessAlert$ = createEffect( () .> { return this.actions$.pipe( ofType( composersApiActions.composerAddedSuccess, composersApiActions.composerUpdatedSuccess ), tap(() .> this.alert.success('Composer saved successfully!')) ); }, { dispatch: false } );
82. readonly showSaveComposerSuccessAlert$ = createEffect( () .> { return this.actions$.pipe( ofType( composersApiActions.composerAddedSuccess, composersApiActions.composerUpdatedSuccess ), tap(() .> this.alert.success('Composer saved successfully!')) ); }, { dispatch: false } );
83. ★ Name effects like functions ★ Keep effects simple ★ Don’t create “boiler” effects ★ Apply good action hygiene Effects Tips
84. Move the business logic to services.
85. readonly loadMusician$ = createEffect(() .> { return this.actions$.pipe( ofType(musicianDetailsPage.opened), concatLatestFrom(() .> this.store.select(selectMusicianIdFromRoute) ), concatMap(([, musicianId]) .> { return this.musiciansResource.getMusician(musicianId).pipe( mergeMap((musician) .> { return this.bandsResource.getBand(musician.bandId).pipe( map((band) .> ({ ...musician, bandName: band.name })) ); }), map((musician) .> musiciansApiActions.musicianLoadedSuccess({ musician }) ), catchError((error: { message: string }) .> of(musiciansApiActions.musicianLoadedFailure({ error })) ) ); }) ); });
86. readonly loadMusician$ = createEffect(() .> { return this.actions$.pipe( ofType(musicianDetailsPage.opened), concatLatestFrom(() .> this.store.select(selectMusicianIdFromRoute) ), concatMap(([, musicianId]) .> { return this.musiciansResource.getMusician(musicianId).pipe( mergeMap((musician) .> { return this.bandsResource.getBand(musician.bandId).pipe( map((band) .> ({ ...musician, bandName: band.name })) ); }), map((musician) .> musiciansApiActions.musicianLoadedSuccess({ musician }) ), catchError((error: { message: string }) .> of(musiciansApiActions.musicianLoadedFailure({ error })) ) ); }) ); });
87. readonly loadMusician$ = createEffect(() .> { return this.actions$.pipe( ofType(musicianDetailsPage.opened), concatLatestFrom(() .> this.store.select(selectMusicianIdFromRoute) ), concatMap(([, musicianId]) .> { return this.musiciansResource.getMusician(musicianId).pipe( mergeMap((musician) .> { return this.bandsResource.getBand(musician.bandId).pipe( map((band) .> ({ ...musician, bandName: band.name })) ); }), map((musician) .> musiciansApiActions.musicianLoadedSuccess({ musician }) ), catchError((error: { message: string }) .> of(musiciansApiActions.musicianLoadedFailure({ error })) ) ); }) ); });
88. readonly loadMusician$ = createEffect(() .> { return this.actions$.pipe( ofType(musicianDetailsPage.opened), concatLatestFrom(() .> this.store.select(selectMusicianIdFromRoute) ), concatMap(([, musicianId]) .> { return this.musiciansResource.getMusician(musicianId).pipe( mergeMap((musician) .> { return this.bandsResource.getBand(musician.bandId).pipe( map((band) .> ({ ...musician, bandName: band.name })) ); }), map((musician) .> musiciansApiActions.musicianLoadedSuccess({ musician }) ), catchError((error: { message: string }) .> of(musiciansApiActions.musicianLoadedFailure({ error })) ) ); }) ); });
89. readonly loadMusician$ = createEffect(() .> { return this.actions$.pipe( ofType(musicianDetailsPage.opened), concatLatestFrom(() .> this.store.select(selectMusicianIdFromRoute) ), concatMap(([, musicianId]) .> { return this.musiciansResource.getMusician(musicianId).pipe( mergeMap((musician) .> { return this.bandsResource.getBand(musician.bandId).pipe( map((band) .> ({ ...musician, bandName: band.name })) ); }), map((musician) .> musiciansApiActions.musicianLoadedSuccess({ musician }) ), catchError((error: { message: string }) .> of(musiciansApiActions.musicianLoadedFailure({ error })) ) ); }) ); });
90. readonly loadMusician$ = createEffect(() .> { return this.actions$.pipe( ofType(musicianDetailsPage.opened), concatLatestFrom(() .> this.store.select(selectMusicianIdFromRoute) ), concatMap(([, musicianId]) .> { return this.musiciansResource.getMusician(musicianId).pipe( mergeMap((musician) .> { return this.bandsResource.getBand(musician.bandId).pipe( map((band) .> ({ ...musician, bandName: band.name })) ); }), map((musician) .> musiciansApiActions.musicianLoadedSuccess({ musician }) ), catchError((error: { message: string }) .> of(musiciansApiActions.musicianLoadedFailure({ error })) ) ); }) ); });
91. readonly loadMusician$ = createEffect(() .> { return this.actions$.pipe( ofType(musicianDetailsPage.opened), concatLatestFrom(() .> this.store.select(selectMusicianIdFromRoute) ), concatMap(([, musicianId]) .> { return this.musiciansResource.getMusician(musicianId).pipe( mergeMap((musician) .> { return this.bandsResource.getBand(musician.bandId).pipe( map((band) .> ({ ...musician, bandName: band.name })) ); }), map((musician) .> musiciansApiActions.musicianLoadedSuccess({ musician }) ), catchError((error: { message: string }) .> of(musiciansApiActions.musicianLoadedFailure({ error })) ) ); }) ); });
92. readonly loadMusician$ = createEffect(() .> { return this.actions$.pipe( ofType(musicianDetailsPage.opened), concatLatestFrom(() .> this.store.select(selectMusicianIdFromRoute) ), concatMap(([, musicianId]) .> { return this.musiciansResource.getMusician(musicianId).pipe( mergeMap((musician) .> { return this.bandsResource.getBand(musician.bandId).pipe( map((band) .> ({ ...musician, bandName: band.name })) ); }), map((musician) .> musiciansApiActions.musicianLoadedSuccess({ musician }) ), catchError((error: { message: string }) .> of(musiciansApiActions.musicianLoadedFailure({ error })) ) ); }) ); });
93. @Injectable({ providedIn: 'root' }) export class MusiciansService { }
94. @Injectable({ providedIn: 'root' }) export class MusiciansService { constructor( private readonly musiciansResource: MusiciansResource, private readonly bandsResource: BandsResource ) {} }
95. @Injectable({ providedIn: 'root' }) export class MusiciansService { constructor( private readonly musiciansResource: MusiciansResource, private readonly bandsResource: BandsResource ) {} getMusician(musicianId: string): Observable<Musician> { return this.musiciansResource.getMusician(musicianId).pipe( mergeMap((musician) .> { return this.bandsResource.getBand(musician.bandId).pipe( map((band) .> ({ ...musician, bandName: band.name })) ); }) ); } }
96. readonly loadMusician$ = createEffect(() .> { return this.actions$.pipe( ofType(musicianDetailsPage.opened), concatLatestFrom(() .> this.store.select(selectMusicianIdFromRoute) ), concatMap(([, musicianId]) .> { return this.musiciansResource.getMusician(musicianId).pipe( mergeMap((musician) .> { return this.bandsResource.getBand(musician.bandId).pipe( map((band) .> ({ ...musician, bandName: band.name })) ); }), map((musician) .> musiciansApiActions.musicianLoadedSuccess({ musician }) ), catchError((error: { message: string }) .> of(musiciansApiActions.musicianLoadedFailure({ error })) ) ); }) ); });
97. readonly loadMusician$ = createEffect(() .> { return this.actions$.pipe( ofType(musicianDetailsPage.opened), concatLatestFrom(() .> this.store.select(selectMusicianIdFromRoute) ), concatMap(([, musicianId]) .> { return this.musiciansService.getMusician(musicianId).pipe( map((musician) .> musiciansApiActions.musicianLoadedSuccess({ musician }) ), catchError((error: { message: string }) .> of(musiciansApiActions.musicianLoadedFailure({ error })) ) ); }) ); });
98. readonly loadMusician$ = createEffect(() .> { return this.actions$.pipe( ofType(musicianDetailsPage.opened), concatLatestFrom(() .> this.store.select(selectMusicianIdFromRoute) ), concatMap(([, musicianId]) .> { return this.musiciansService.getMusician(musicianId).pipe( map((musician) .> musiciansApiActions.musicianLoadedSuccess({ musician }) ), catchError((error: { message: string }) .> of(musiciansApiActions.musicianLoadedFailure({ error })) ) ); }) ); });
99. ★ Name effects like functions ★ Keep effects simple ★ Don’t create “boiler” effects ★ Apply good action hygiene Effects Tips
100. NgRx effect can listen to multiple events.
101. readonly invokeLoadMusicians$ = createEffect(() .> { return this.actions$.pipe( ofType( musiciansPageActions.currentPageChanged, musiciansPageActions.pageSizeChanged ), map(() .> musiciansActions.loadMusicians()) ); });
102. readonly invokeLoadMusicians$ = createEffect(() .> { return this.actions$.pipe( ofType( musiciansPageActions.currentPageChanged, musiciansPageActions.pageSizeChanged ), map(() .> musiciansActions.loadMusicians()) ); });
103. readonly invokeLoadMusicians$ = createEffect(() .> { return this.actions$.pipe( ofType( musiciansPageActions.currentPageChanged, musiciansPageActions.pageSizeChanged ), map(() .> musiciansActions.loadMusicians()) ); });
104. readonly invokeLoadMusicians$ = createEffect(() .> { return this.actions$.pipe( ofType( musiciansPageActions.currentPageChanged, musiciansPageActions.pageSizeChanged ), map(() .> musiciansActions.loadMusicians()) ); }); readonly loadMusicians$ = createEffect(() .> { return this.actions$.pipe( ofType(musiciansActions.loadMusicians), concatLatestFrom(() .> this.store.select(selectMusiciansPagination) ), switchMap(([, pagination]) .> { return this.musiciansService.getMusicians(pagination).pipe( ** **. */ ); }) ); });
105. readonly invokeLoadMusicians$ = createEffect(() .> { return this.actions$.pipe( ofType( musiciansPageActions.currentPageChanged, musiciansPageActions.pageSizeChanged ), map(() .> musiciansActions.loadMusicians()) ); }); readonly loadMusicians$ = createEffect(() .> { return this.actions$.pipe( ofType(musiciansActions.loadMusicians), concatLatestFrom(() .> this.store.select(selectMusiciansPagination) ), switchMap(([, pagination]) .> { return this.musiciansService.getMusicians(pagination).pipe( ** **. */ ); }) ); });
106. readonly invokeLoadMusicians$ = createEffect(() .> { return this.actions$.pipe( ofType( musiciansPageActions.currentPageChanged, musiciansPageActions.pageSizeChanged ), map(() .> musiciansActions.loadMusicians()) ); }); readonly loadMusicians$ = createEffect(() .> { return this.actions$.pipe( concatLatestFrom(() .> this.store.select(selectMusiciansPagination) ), switchMap(([, pagination]) .> { return this.musiciansService.getMusicians(pagination).pipe( ** **. */ ); }) ); });
107. readonly loadMusicians$ = createEffect(() .> { return this.actions$.pipe( ofType( musiciansPageActions.currentPageChanged, musiciansPageActions.pageSizeChanged ), concatLatestFrom(() .> this.store.select(selectMusiciansPagination) ), switchMap(([, pagination]) .> { return this.musiciansService.getMusicians(pagination).pipe( ** **. */ ); }) ); });
108. ★ Name effects like functions ★ Keep effects simple ★ Don’t create “boiler” effects ★ Apply good action hygiene Effects Tips
109. Don’t return an array of actions (commands) from the effect.
110. readonly loadAlbum$ = createEffect(() .> { return this.actions$.pipe( ofType(albumDetailsPageActions.opened), concatLatestFrom(() .> this.store.select(selectAlbumIdFromRoute)), concatMap(([, albumId]) .> { return this.albumsService.getAlbum(albumId).pipe( mergeMap(({ songs, composers }) .> [ songsActions.loadSongsSuccess({ songs }), composersActions.loadComposersSuccess({ composers }), ]), catchError(** **. */) ); }) ); });
111. readonly loadAlbum$ = createEffect(() .> { return this.actions$.pipe( ofType(albumDetailsPageActions.opened), concatLatestFrom(() .> this.store.select(selectAlbumIdFromRoute)), concatMap(([, albumId]) .> { return this.albumsService.getAlbum(albumId).pipe( mergeMap(({ songs, composers }) .> [ songsActions.loadSongsSuccess({ songs }), composersActions.loadComposersSuccess({ composers }), ]), catchError(** **. */) ); }) ); });
112. readonly loadAlbum$ = createEffect(() .> { return this.actions$.pipe( ofType(albumDetailsPageActions.opened), concatLatestFrom(() .> this.store.select(selectAlbumIdFromRoute)), concatMap(([, albumId]) .> { return this.albumsService.getAlbum(albumId).pipe( mergeMap(({ songs, composers }) .> [ songsActions.loadSongsSuccess({ songs }), composersActions.loadComposersSuccess({ composers }), ]), catchError(** **. */) ); }) ); });
113. readonly loadAlbum$ = createEffect(() .> { return this.actions$.pipe( ofType(albumDetailsPageActions.opened), concatLatestFrom(() .> this.store.select(selectAlbumIdFromRoute)), concatMap(([, albumId]) .> { return this.albumsService.getAlbum(albumId).pipe( mergeMap(({ songs, composers }) .> [ songsActions.loadSongsSuccess({ songs }), composersActions.loadComposersSuccess({ composers }), ]), catchError(** **. */) ); }) ); });
114. readonly loadAlbum$ = createEffect(() .> { return this.actions$.pipe( ofType(albumDetailsPageActions.opened), concatLatestFrom(() .> this.store.select(selectAlbumIdFromRoute)), concatMap(([, albumId]) .> { return this.albumsService.getAlbum(albumId).pipe( map(({ songs, composers }) .> albumsApiActions.albumLoadedSuccess({ songs, composers }), ), catchError(** **. */) ); }) ); });
115. export const songsReducer = createReducer( on(albumsApiActions.albumLoadedSuccess, (state, { songs }) .> ({ ...state, songs, })) ); export const composersReducer = createReducer( on(albumsApiActions.albumLoadedSuccess, (state, { composers }) .> ({ ...state, composers, })) );
116. ★ Name effects like functions ★ Keep effects simple ★ Don’t create “boiler” effects ★ Apply good action hygiene Effects Tips
117. Marko Stanimirović @MarkoStDev Thank You!