NgRx - Core Principles & New Features

Transcript

1. NgRx - Core Principles & New Features Marko Stanimirović
2. Marko Stanimirović @MarkoStDev ★ Sr. Frontend Engineer at JobCloud ★ NgRx Core Team Member ★ Google Developer Expert in Angular ★ Angular Belgrade Organizer ★ M.Sc. in Software Engineering
3. What is NgRx?
4. Framework for building reactive applications in Angular Provides State, Data, View, and Tooling packages
5. State Packages
6. State Packages ★ @ngrx/store
7. State Packages ★ @ngrx/store ★ @ngrx/effects
8. State Packages ★ @ngrx/store ★ @ngrx/effects ★ @ngrx/router-store
9. State Packages ★ @ngrx/store ★ @ngrx/effects ★ @ngrx/router-store ★ @ngrx/entity
10. State Packages ★ @ngrx/store ★ @ngrx/effects ★ @ngrx/router-store ★ @ngrx/entity ★ @ngrx/component-store
11. Data Packages
12. Data Packages ★ @ngrx/data
13. View Packages
14. View Packages ★ @ngrx/component
15. Tooling Packages
16. Tooling Packages ★ @ngrx/store-devtools
17. Tooling Packages ★ @ngrx/store-devtools ★ @ngrx/schematics
18. Tooling Packages ★ @ngrx/store-devtools ★ @ngrx/schematics ★ @ngrx/eslint-plugin
19. NgRx Store
20. Inspired by Redux Powered by RxJS
21. Component Store
22. Component Store Action
23. Reducer Component Store Action
24. Reducer Component Store Selector Action
25. Let’s create an app with NgRx!
26. Let’s create an app with NgRx!
27. Actions
28. musicians-page.actions.ts
29. musicians-page.actions.ts import { createAction } from '@ngrx/store'; export const opened = createAction( '[Musicians Page] Opened' );
30. musicians-page.actions.ts import { createAction } from '@ngrx/store'; export const opened = createAction( '[Musicians Page] Opened' ); source event
31. musicians-page.actions.ts import { createAction, props } from '@ngrx/store'; export const opened = createAction( '[Musicians Page] Opened' ); export const queryChanged = createAction( '[Musicians Page] Query Changed', props<{ query: string }>() );
32. musicians-api.actions.ts
33. musicians-api.actions.ts import { createAction, props } from '@ngrx/store'; export const musiciansLoadedSuccess = createAction( '[Musicians API] Musicians Loaded Success', props<{ musicians: Musician[] }>() );
34. musicians-api.actions.ts import { createAction, props } from '@ngrx/store'; export const musiciansLoadedSuccess = createAction( '[Musicians API] Musicians Loaded Success', props<{ musicians: Musician[] }>() ); export const musiciansLoadedFailure = createAction( '[Musicians API] Musicians Loaded Failure', props<{ message: string }>() );
35. Reducer
36. musicians.reducer.ts
37. musicians.reducer.ts export interface State { musicians: Musician[]; isLoading: boolean; query: string; }
38. musicians.reducer.ts export interface State { musicians: Musician[]; isLoading: boolean; query: string; } const initialState: State = { musicians: [], isLoading: false, query: '', };
39. musicians.reducer.ts import { createReducer } from '@ngrx/store'; export interface State { musicians: Musician[]; isLoading: boolean; query: string; } const initialState: State = { musicians: [], isLoading: false, query: '', }; export const reducer = createReducer( );
40. musicians.reducer.ts import { createReducer } from '@ngrx/store'; export interface State { musicians: Musician[]; isLoading: boolean; query: string; } const initialState: State = { musicians: [], isLoading: false, query: '', }; export const reducer = createReducer( initialState, );
41. musicians.reducer.ts import { createReducer, on } from '@ngrx/store'; import * as musiciansPageActions from './musicians-page.actions'; export interface State { musicians: Musician[]; isLoading: boolean; query: string; } const initialState: State = { musicians: [], isLoading: false, query: '', }; export const reducer = createReducer( initialState, on( musiciansPageActions.opened, (state) => ({ ==.state, isLoading: true }) ), );
42. musicians.reducer.ts import { createReducer, on } from '@ngrx/store'; import * as musiciansPageActions from './musicians-page.actions'; export interface State { musicians: Musician[]; isLoading: boolean; query: string; } const initialState: State = { musicians: [], isLoading: false, query: '', }; export const reducer = createReducer( initialState, on( musiciansPageActions.opened, (state) => ({ ==.state, isLoading: true }) ), ); immutable state update
43. musicians.reducer.ts import { createReducer, on } from '@ngrx/store'; import * as musiciansPageActions from './musicians-page.actions'; import * as musiciansApiActions from './musicians-api.actions'; export interface State { musicians: Musician[]; isLoading: boolean; query: string; } const initialState: State = { musicians: [], isLoading: false, query: '', }; export const reducer = createReducer( initialState, on( musiciansPageActions.opened, (state) => ({ ==.state, isLoading: true }) ), on( musiciansPageActions.queryChanged, (state, { query }) => ({ ==.state, query }) ), on( musiciansApiActions.musiciansLoadedSuccess, (state, { musicians }) => ({ ==.state, musicians, isLoading: false }) ) );
44. Providing Store and Registering Reducers
45. main.ts import { bootstrapApplication } from '@angular/platform-browser'; bootstrapApplication(AppComponent, { providers: [ ], }); Providing Store and Registering Reducers
46. main.ts import { bootstrapApplication } from '@angular/platform-browser'; import { provideStore } from '@ngrx/store'; import * as fromMusicians from './app/musicians/musicians.reducer'; bootstrapApplication(AppComponent, { providers: [ provideStore({ musicians: fromMusicians.reducer }), ], }); Providing Store and Registering Reducers
47. main.ts import { bootstrapApplication } from '@angular/platform-browser'; import { provideStore, provideState } from '@ngrx/store'; import * as fromMusicians from './app/musicians/musicians.reducer'; bootstrapApplication(AppComponent, { providers: [ provideStore(), provideState('musicians', fromMusicians.reducer), ], }); Providing Store and Registering Reducers
48. Selectors
49. musicians.selectors.ts
50. musicians.selectors.ts import { createFeatureSelector } from '@ngrx/store'; import * as fromMusicians from './musicians.reducer'; export const selectMusiciansState = createFeatureSelector<fromMusicians.State>('musicians');
51. musicians.selectors.ts import { createFeatureSelector, createSelector } from '@ngrx/store'; import * as fromMusicians from './musicians.reducer'; export const selectMusiciansState = createFeatureSelector<fromMusicians.State>('musicians'); export const selectMusicians = createSelector( selectMusiciansState, (state) => state.musicians );
52. musicians.selectors.ts import { createFeatureSelector, createSelector } from '@ngrx/store'; import * as fromMusicians from './musicians.reducer'; export const selectMusiciansState = createFeatureSelector<fromMusicians.State>('musicians'); export const selectMusicians = createSelector( selectMusiciansState, (state) => state.musicians ); export const selectIsLoading = createSelector( selectMusiciansState, (state) => state.isLoading ); export const selectQuery = createSelector( selectMusiciansState, (state) => state.query );
53. musicians.selectors.ts import { createFeatureSelector, createSelector } from '@ngrx/store'; import * as fromMusicians from './musicians.reducer'; export const selectMusiciansState = createFeatureSelector<fromMusicians.State>('musicians'); export const selectMusicians = createSelector( selectMusiciansState, (state) => state.musicians ); export const selectIsLoading = createSelector( selectMusiciansState, (state) => state.isLoading ); export const selectQuery = createSelector( selectMusiciansState, (state) => state.query ); export const selectFilteredMusicians = createSelector( selectMusicians, selectQuery, (musicians, query) => musicians.filter(({ name }) => name.toLowerCase().includes(query)) );
54. Container Component
55. musicians.component.ts @Component({ selector: 'app-musicians', changeDetection: ChangeDetectionStrategy.OnPush, }) export class MusiciansComponent implements OnInit { }
56. musicians.component.ts import { Store } from '@ngrx/store'; @Component({ selector: 'app-musicians', changeDetection: ChangeDetectionStrategy.OnPush, }) export class MusiciansComponent implements OnInit { private readonly store = inject(Store); }
57. musicians.component.ts import { Store } from '@ngrx/store'; import * as musiciansPageActions from './musicians-page.actions'; @Component({ selector: 'app-musicians', changeDetection: ChangeDetectionStrategy.OnPush, }) export class MusiciansComponent implements OnInit { private readonly store = inject(Store); ngOnInit(): void { this.store.dispatch(musiciansPageActions.opened()); } }
58. musicians.component.ts import { Store } from '@ngrx/store'; import * as musiciansPageActions from './musicians-page.actions'; @Component({ selector: 'app-musicians', changeDetection: ChangeDetectionStrategy.OnPush, }) export class MusiciansComponent implements OnInit { private readonly store = inject(Store); ngOnInit(): void { this.store.dispatch(musiciansPageActions.opened()); } onSearch(query: string): void { this.store.dispatch( musiciansPageActions.queryChanged({ query }) ); } }
59. musicians.component.ts import { Store } from '@ngrx/store'; import * as musiciansPageActions from './musicians-page.actions'; import { selectFilteredMusicians } from './musicians.selectors'; @Component({ selector: 'app-musicians', changeDetection: ChangeDetectionStrategy.OnPush, }) export class MusiciansComponent implements OnInit { private readonly store = inject(Store); readonly musicians$ = this.store.select(selectFilteredMusicians); ngOnInit(): void { this.store.dispatch(musiciansPageActions.opened()); } onSearch(query: string): void { this.store.dispatch( musiciansPageActions.queryChanged({ query }) ); } }
60. musicians.component.ts import { Store } from '@ngrx/store'; import * as musiciansPageActions from './musicians-page.actions'; import { selectFilteredMusicians, selectIsLoading, selectQuery, } from './musicians.selectors'; @Component({ selector: 'app-musicians', changeDetection: ChangeDetectionStrategy.OnPush, }) export class MusiciansComponent implements OnInit { private readonly store = inject(Store); readonly musicians$ = this.store.select(selectFilteredMusicians); readonly isLoading$ = this.store.select(selectIsLoading); readonly query$ = this.store.select(selectQuery); ngOnInit(): void { this.store.dispatch(musiciansPageActions.opened()); } onSearch(query: string): void { this.store.dispatch( musiciansPageActions.queryChanged({ query }) ); } }
61. musicians.component.ts musicians.component.html import { Store } from '@ngrx/store'; import * as musiciansPageActions from './musicians-page.actions'; import { selectFilteredMusicians, selectIsLoading, selectQuery, } from './musicians.selectors'; @Component({ selector: 'app-musicians', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [AsyncPipe, SearchBoxComponent, MusicianListComponent], templateUrl: './musicians.component.html', }) export class MusiciansComponent implements OnInit { private readonly store = inject(Store); readonly musicians$ = this.store.select(selectFilteredMusicians); readonly isLoading$ = this.store.select(selectIsLoading); readonly query$ = this.store.select(selectQuery); ngOnInit(): void { this.store.dispatch(musiciansPageActions.opened()); } onSearch(query: string): void { this.store.dispatch( musiciansPageActions.queryChanged({ query }) ); } }
62. musicians.component.ts musicians.component.html <h1>Find Your Favorite Musicians=/h1> <app-search-box [query]="query$ | async" (search)="onSearch($event)" >=/app-search-box> <app-musician-list [musicians]="musicians$ | async" [isLoading]="isLoading$ | async" >=/app-musician-list> import { Store } from '@ngrx/store'; import * as musiciansPageActions from './musicians-page.actions'; import { selectFilteredMusicians, selectIsLoading, selectQuery, } from './musicians.selectors'; @Component({ selector: 'app-musicians', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [AsyncPipe, SearchBoxComponent, MusicianListComponent], templateUrl: './musicians.component.html', }) export class MusiciansComponent implements OnInit { private readonly store = inject(Store); readonly musicians$ = this.store.select(selectFilteredMusicians); readonly isLoading$ = this.store.select(selectIsLoading); readonly query$ = this.store.select(selectQuery); ngOnInit(): void { this.store.dispatch(musiciansPageActions.opened()); } onSearch(query: string): void { this.store.dispatch( musiciansPageActions.queryChanged({ query }) ); } }
63. NgRx Effects
64. Isolating side effects for cleaner component architecture Handling side effects in a reactive way
65. Reducer Component Store Selector Action Effect
66. Reducer Component Store Selector Action Effect
67. Reducer Component Store Selector Action Effect
68. musicians.effects.ts @Injectable() export class MusiciansEffects { }
69. musicians.effects.ts import { Actions } from '@ngrx/effects'; @Injectable() export class MusiciansEffects { private readonly actions$ = inject(Actions); }
70. musicians.effects.ts import { Actions, createEffect } from '@ngrx/effects'; @Injectable() export class MusiciansEffects { private readonly actions$ = inject(Actions); readonly loadAllMusicians$ = createEffect(() => { }); }
71. musicians.effects.ts import { Actions, createEffect } from '@ngrx/effects'; @Injectable() export class MusiciansEffects { private readonly actions$ = inject(Actions); readonly loadAllMusicians$ = createEffect(() => { return this.actions$.pipe( ); }); }
72. musicians.effects.ts import { Actions, createEffect, ofType } from '@ngrx/effects'; import * as musiciansPageActions from './musicians-page.actions'; @Injectable() export class MusiciansEffects { private readonly actions$ = inject(Actions); readonly loadAllMusicians$ = createEffect(() => { return this.actions$.pipe( ofType(musiciansPageActions.opened) ); }); }
73. musicians.effects.ts import { Actions, createEffect, ofType } from '@ngrx/effects'; import * as musiciansPageActions from './musicians-page.actions'; @Injectable() export class MusiciansEffects { private readonly actions$ = inject(Actions); private readonly musiciansService = inject(MusiciansService); readonly loadAllMusicians$ = createEffect(() => { return this.actions$.pipe( ofType(musiciansPageActions.opened), exhaustMap(() => { return this.musiciansService.getAll().pipe( ); }) ); }); }
74. musicians.effects.ts import { Actions, createEffect, ofType } from '@ngrx/effects'; import * as musiciansPageActions from './musicians-page.actions'; import * as musiciansApiActions from './musicians-api.actions'; @Injectable() export class MusiciansEffects { private readonly actions$ = inject(Actions); private readonly musiciansService = inject(MusiciansService); readonly loadAllMusicians$ = createEffect(() => { return this.actions$.pipe( ofType(musiciansPageActions.opened), exhaustMap(() => { return this.musiciansService.getAll().pipe( map((musicians) => musiciansApiActions.musiciansLoadedSuccess({ musicians }) ), ); }) ); }); }
75. musicians.effects.ts import { Actions, createEffect, ofType } from '@ngrx/effects'; import * as musiciansPageActions from './musicians-page.actions'; import * as musiciansApiActions from './musicians-api.actions'; @Injectable() export class MusiciansEffects { private readonly actions$ = inject(Actions); private readonly musiciansService = inject(MusiciansService); readonly loadAllMusicians$ = createEffect(() => { return this.actions$.pipe( ofType(musiciansPageActions.opened), exhaustMap(() => { return this.musiciansService.getAll().pipe( map((musicians) => musiciansApiActions.musiciansLoadedSuccess({ musicians }) ), catchError(({ message }: { message: string }) => of(musiciansApiActions.musiciansLoadedFailure({ message })) ) ); }) ); }); }
76. Registering Effects
77. main.ts import { bootstrapApplication } from '@angular/platform-browser'; import { provideState, provideStore } from '@ngrx/store'; import * as fromMusicians from './app/musicians/musicians.reducer'; bootstrapApplication(AppComponent, { providers: [ provideStore(), provideState('musicians', fromMusicians.reducer), ], }); Registering Effects
78. main.ts import { bootstrapApplication } from '@angular/platform-browser'; import { provideState, provideStore } from '@ngrx/store'; import * as fromMusicians from './app/musicians/musicians.reducer'; import { provideEffects } from '@ngrx/effects'; import { MusiciansEffects } from './app/musicians/musicians.effects'; bootstrapApplication(AppComponent, { providers: [ provideStore(), provideState('musicians', fromMusicians.reducer), provideEffects(MusiciansEffects), ], }); Registering Effects
79. New Features ★ Action Group Creator ★ Feature Creator ★ Functional Effects
80. Action Group Creator
81. musicians/actions/musicians-api.actions.ts import { createAction, props } from '@ngrx/store'; export const musiciansLoadedSuccess = createAction( '[Musicians API] Musicians Loaded Success', props<{ musicians: Musician[] }>() ); export const musiciansLoadedFailure = createAction( '[Musicians API] Musicians Loaded Failure', props<{ message: string }>() ); createAction
82. musicians/actions/musicians-api.actions.ts import { createAction, props } from '@ngrx/store'; export const musiciansLoadedSuccess = createAction( '[Musicians API] Musicians Loaded Success', props<{ musicians: Musician[] }>() ); export const musiciansLoadedFailure = createAction( '[Musicians API] Musicians Loaded Failure', props<{ message: string }>() ); createAction 1. Manually apply “[Source] Event” pattern
83. musicians/actions/musicians-api.actions.ts import { createAction, props } from '@ngrx/store'; export const musiciansLoadedSuccess = createAction( '[Musicians API] Musicians Loaded Success', props<{ musicians: Musician[] }>() ); export const musiciansLoadedFailure = createAction( '[Musicians API] Musicians Loaded Failure', props<{ message: string }>() ); createAction 1. Manually apply “[Source] Event” pattern 2. Repeat “Source” for each action
84. musicians/actions/musicians-api.actions.ts import { createAction, props } from '@ngrx/store'; export const musiciansLoadedSuccess = createAction( '[Musicians API] Musicians Loaded Success', props<{ musicians: Musician[] }>() ); export const musiciansLoadedFailure = createAction( '[Musicians API] Musicians Loaded Failure', props<{ message: string }>() ); createAction 1. Manually apply “[Source] Event” pattern 2. Repeat “Source” for each action 3. Action name is camel-cased event name
85. musicians/actions/musicians-api.actions.ts import { createAction, props } from '@ngrx/store'; export const musiciansLoadedSuccess = createAction( '[Musicians API] Musicians Loaded Success', props<{ musicians: Musician[] }>() ); export const musiciansLoadedFailure = createAction( '[Musicians API] Musicians Loaded Failure', props<{ message: string }>() ); createAction musicians/actions/index.ts export * as musiciansApiActions from './musicians-api.actions'; 1. Manually apply “[Source] Event” pattern 2. Repeat “Source” for each action 3. Action name is camel-cased event name 4. Use barrel file to create named exports for actions with the same source
86. musicians/actions/musicians-api.actions.ts import { createAction, props } from '@ngrx/store'; export const musiciansLoadedSuccess = createAction( '[Musicians API] Musicians Loaded Success', props<{ musicians: Musician[] }>() ); export const musiciansLoadedFailure = createAction( '[Musicians API] Musicians Loaded Failure', props<{ message: string }>() ); createAction musicians/actions/index.ts export * as musiciansApiActions from './musicians-api.actions'; createActionGroup musicians/actions/musicians-api.actions.ts
87. musicians/actions/musicians-api.actions.ts import { createAction, props } from '@ngrx/store'; export const musiciansLoadedSuccess = createAction( '[Musicians API] Musicians Loaded Success', props<{ musicians: Musician[] }>() ); export const musiciansLoadedFailure = createAction( '[Musicians API] Musicians Loaded Failure', props<{ message: string }>() ); createAction musicians/actions/index.ts export * as musiciansApiActions from './musicians-api.actions'; createActionGroup musicians/actions/musicians-api.actions.ts import { createActionGroup } from '@ngrx/store'; export const musiciansApiActions = createActionGroup({ });
88. musicians/actions/musicians-api.actions.ts import { createAction, props } from '@ngrx/store'; export const musiciansLoadedSuccess = createAction( '[Musicians API] Musicians Loaded Success', props<{ musicians: Musician[] }>() ); export const musiciansLoadedFailure = createAction( '[Musicians API] Musicians Loaded Failure', props<{ message: string }>() ); createAction musicians/actions/index.ts export * as musiciansApiActions from './musicians-api.actions'; createActionGroup musicians/actions/musicians-api.actions.ts import { createActionGroup } from '@ngrx/store'; export const musiciansApiActions = createActionGroup({ source: 'Musicians API', });
89. musicians/actions/musicians-api.actions.ts import { createAction, props } from '@ngrx/store'; export const musiciansLoadedSuccess = createAction( '[Musicians API] Musicians Loaded Success', props<{ musicians: Musician[] }>() ); export const musiciansLoadedFailure = createAction( '[Musicians API] Musicians Loaded Failure', props<{ message: string }>() ); createAction musicians/actions/index.ts export * as musiciansApiActions from './musicians-api.actions'; createActionGroup musicians/actions/musicians-api.actions.ts import { createActionGroup, props } from '@ngrx/store'; export const musiciansApiActions = createActionGroup({ source: 'Musicians API', events: { 'Musicians Loaded Success': props<{ musicians: Musician[] }>(), 'Musicians Loaded Failure': props<{ message: string }>(), }, });
90. musicians/actions/musicians-api.actions.ts import { createAction, props } from '@ngrx/store'; export const musiciansLoadedSuccess = createAction( '[Musicians API] Musicians Loaded Success', props<{ musicians: Musician[] }>() ); export const musiciansLoadedFailure = createAction( '[Musicians API] Musicians Loaded Failure', props<{ message: string }>() ); createAction musicians/actions/index.ts export * as musiciansApiActions from './musicians-api.actions'; createActionGroup musicians/actions/musicians-api.actions.ts import { createActionGroup, props } from '@ngrx/store'; export const musiciansApiActions = createActionGroup({ source: 'Musicians API', events: { 'Musicians Loaded Success': props<{ musicians: Musician[] }>(), 'Musicians Loaded Failure': props<{ message: string }>(), }, }); */ type: [Musicians API] Musicians Loaded Success musiciansApiActions.musiciansLoadedSuccess({ musicians }); */ type: [Musicians API] Musicians Loaded Failure musiciansApiActions.musiciansLoadedFailure({ message });
91. musicians-api.actions.ts export const musiciansLoadedSuccess = createAction( '[Musicians API] Musicians Loaded Success', props<{ musicians: Musician[] }>() ); export const musiciansLoadedFailure = createAction( '[Musicians API] Musicians Loaded Failure', props<{ message: string }>() ); export const musicianCreatedSuccess = createAction( '[Musicians API] Musician Created Success', props<{ musician: Musician }>() ); export const musicianCreatedFailure = createAction( '[Musicians API] Musician Created Failure', props<{ message: string }>() ); export const musicianUpdatedSuccess = createAction( '[Musicians API] Musician Updated Success', props<{ musician: Musician }>() ); export const musicianUpdatedFailure = createAction( '[Musicians API] Musician Updated Failure', props<{ message: string }>() ); export const musiciansApiActions = createActionGroup({ source: 'Musicians API', events: { 'Musicians Loaded Success': props<{ musicians: Musician[] }>(), 'Musicians Loaded Failure': props<{ message: string }>(), 'Musician Created Success': props<{ musician: Musician }>(), 'Musician Created Failure': props<{ message: string }>(), 'Musician Updated Success': props<{ musician: Musician }>(), 'Musician Updated Failure': props<{ message: string }>(), }, }); ~50%
92. Feature Creator
93. What is NgRx Feature?
94. Reducer
95. Reducer Feature Name
96. Reducer Feature Name Selectors
97. Reducer Feature Name Selectors NgRx Feature
98. musicians.state.ts interface State { musicians: Musician[]; isLoading: boolean; query: string; } const initialState = { musicians: [], isLoading: false, query: '' }; const reducer = createReducer(initialState, ** **. */); musicians.selectors.ts import { createFeatureSelector, createSelector, } from '@ngrx/store'; import * as fromMusicians from './musicians.reducer'; export const selectMusiciansState = createFeatureSelector<fromMusicians.State>('musicians'); export const selectMusicians = createSelector( selectMusiciansState, (state) => state.musicians ); export const selectIsLoading = createSelector( selectMusiciansState, (state) => state.isLoading ); export const selectQuery = createSelector( selectMusiciansState, (state) => state.query ); export const selectFilteredMusicians = createSelector( selectMusicians, selectQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) );
99. musicians.state.ts import { createFeature } from '@ngrx/store'; interface State { musicians: Musician[]; isLoading: boolean; query: string; } const initialState = { musicians: [], isLoading: false, query: '' }; const reducer = createReducer(initialState, ** **. */); export const musiciansFeature = createFeature({ name: 'musicians', reducer, }); musicians.selectors.ts import { createFeatureSelector, createSelector, } from '@ngrx/store'; import * as fromMusicians from './musicians.reducer'; export const selectMusiciansState = createFeatureSelector<fromMusicians.State>('musicians'); export const selectMusicians = createSelector( selectMusiciansState, (state) => state.musicians ); export const selectIsLoading = createSelector( selectMusiciansState, (state) => state.isLoading ); export const selectQuery = createSelector( selectMusiciansState, (state) => state.query ); export const selectFilteredMusicians = createSelector( selectMusicians, selectQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) );
100. musicians.state.ts import { createFeature } from '@ngrx/store'; interface State { musicians: Musician[]; isLoading: boolean; query: string; } const initialState = { musicians: [], isLoading: false, query: '' }; const reducer = createReducer(initialState, ** **. */); export const musiciansFeature = createFeature({ name: 'musicians', reducer, }); const { name, reducer, selectMusiciansState, */ feature selector */ selector for each feature state property selectMusicians, selectIsLoading, selectQuery, } = musiciansFeature; musicians.selectors.ts import { createFeatureSelector, createSelector, } from '@ngrx/store'; import * as fromMusicians from './musicians.reducer'; export const selectMusiciansState = createFeatureSelector<fromMusicians.State>('musicians'); export const selectMusicians = createSelector( selectMusiciansState, (state) => state.musicians ); export const selectIsLoading = createSelector( selectMusiciansState, (state) => state.isLoading ); export const selectQuery = createSelector( selectMusiciansState, (state) => state.query ); export const selectFilteredMusicians = createSelector( selectMusicians, selectQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) );
101. musicians.state.ts import { createFeature } from '@ngrx/store'; interface State { musicians: Musician[]; isLoading: boolean; query: string; } const initialState = { musicians: [], isLoading: false, query: '' }; const reducer = createReducer(initialState, ** **. */); export const musiciansFeature = createFeature({ name: 'musicians', reducer, }); const { name, reducer, selectMusiciansState, */ feature selector */ selector for each feature state property selectMusicians, selectIsLoading, selectQuery, } = musiciansFeature; musicians.selectors.ts import { createFeatureSelector, createSelector, } from '@ngrx/store'; import * as fromMusicians from './musicians.reducer'; export const selectMusiciansState = createFeatureSelector<fromMusicians.State>('musicians'); export const selectMusicians = createSelector( selectMusiciansState, (state) => state.musicians ); export const selectIsLoading = createSelector( selectMusiciansState, (state) => state.isLoading ); export const selectQuery = createSelector( selectMusiciansState, (state) => state.query ); export const selectFilteredMusicians = createSelector( selectMusicians, selectQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) );
102. musicians.state.ts import { createFeature } from '@ngrx/store'; interface State { musicians: Musician[]; isLoading: boolean; query: string; } const initialState = { musicians: [], isLoading: false, query: '' }; const reducer = createReducer(initialState, ** **. */); export const musiciansFeature = createFeature({ name: 'musicians', reducer, extraSelectors: ({ selectMusicians, selectQuery }) => ({ selectFilteredMusicians: createSelector( selectMusicians, selectQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) ), }), }); const { name, reducer, selectMusiciansState, */ feature selector */ selector for each feature state property selectMusicians, selectIsLoading, selectQuery, selectFilteredMusicians, */ extra selectors } = musiciansFeature; musicians.selectors.ts import { createFeatureSelector, createSelector, } from '@ngrx/store'; import * as fromMusicians from './musicians.reducer'; export const selectMusiciansState = createFeatureSelector<fromMusicians.State>('musicians'); export const selectMusicians = createSelector( selectMusiciansState, (state) => state.musicians ); export const selectIsLoading = createSelector( selectMusiciansState, (state) => state.isLoading ); export const selectQuery = createSelector( selectMusiciansState, (state) => state.query ); export const selectFilteredMusicians = createSelector( selectMusicians, selectQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) );
103. musicians.state.ts import { createFeature } from '@ngrx/store'; interface State { musicians: Musician[]; isLoading: boolean; query: string; } const initialState = { musicians: [], isLoading: false, query: '' }; const reducer = createReducer(initialState, ** **. */); export const musiciansFeature = createFeature({ name: 'musicians', reducer, extraSelectors: ({ selectMusicians, selectQuery }) => ({ selectFilteredMusicians: createSelector( selectMusicians, selectQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) ), }), }); const { name, reducer, selectMusiciansState, */ feature selector */ selector for each feature state property selectMusicians, selectIsLoading, selectQuery, selectFilteredMusicians, */ extra selectors } = musiciansFeature; musicians.selectors.ts import { createFeatureSelector, createSelector, } from '@ngrx/store'; import * as fromMusicians from './musicians.reducer'; export const selectMusiciansState = createFeatureSelector<fromMusicians.State>('musicians'); export const selectMusicians = createSelector( selectMusiciansState, (state) => state.musicians ); export const selectIsLoading = createSelector( selectMusiciansState, (state) => state.isLoading ); export const selectQuery = createSelector( selectMusiciansState, (state) => state.query ); export const selectFilteredMusicians = createSelector( selectMusicians, selectQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) );
104. musicians.state.ts import { createFeature } from '@ngrx/store'; interface State { musicians: Musician[]; isLoading: boolean; query: string; } const initialState = { musicians: [], isLoading: false, query: '' }; const reducer = createReducer(initialState, ** **. */); export const musiciansFeature = createFeature({ name: 'musicians', reducer, extraSelectors: ({ selectMusicians, selectQuery }) => ({ selectFilteredMusicians: createSelector( selectMusicians, selectQuery, (musicians, query) => musicians.filter(({ name }) => name.includes(query)) ), }), }); main.ts import { musiciansFeature } from './app/musicians.state'; bootstrapApplication(AppComponent, { providers: [ provideStore(), provideState(musiciansFeature), ], });
105. Functional Effects
106. musicians.effects.ts
107. musicians.effects.ts import { createEffect } from '@ngrx/effects'; export const loadAllMusicians = createEffect( ( ) => { }, );
108. musicians.effects.ts import { Actions, createEffect } from '@ngrx/effects'; export const loadAllMusicians = createEffect( ( actions$ = inject(Actions), musiciansService = inject(MusiciansService) ) => { }, );
109. musicians.effects.ts import { Actions, createEffect, ofType } from '@ngrx/effects'; import { musiciansPageActions } from './musicians-page.actions'; import { musiciansApiActions } from './musicians-api.actions'; export const loadAllMusicians = createEffect( ( actions$ = inject(Actions), musiciansService = inject(MusiciansService) ) => { return actions$.pipe( ofType(musiciansPageActions.opened), exhaustMap(() => { return musiciansService.getAll().pipe( map((musicians) => musiciansApiActions.musiciansLoadedSuccess({ musicians }) ), catchError(({ message }: { message: string }) => of(musiciansApiActions.musiciansLoadedFailure({ message })) ) ); }) ); }, );
110. musicians.effects.ts import { Actions, createEffect, ofType } from '@ngrx/effects'; import { musiciansPageActions } from './musicians-page.actions'; import { musiciansApiActions } from './musicians-api.actions'; export const loadAllMusicians = createEffect( ( actions$ = inject(Actions), musiciansService = inject(MusiciansService) ) => { return actions$.pipe( ofType(musiciansPageActions.opened), exhaustMap(() => { return musiciansService.getAll().pipe( map((musicians) => musiciansApiActions.musiciansLoadedSuccess({ musicians }) ), catchError(({ message }: { message: string }) => of(musiciansApiActions.musiciansLoadedFailure({ message })) ) ); }) ); }, { functional: true } );
111. musicians.effects.ts import { Actions, createEffect, ofType } from '@ngrx/effects'; import { musiciansPageActions } from './musicians-page.actions'; import { musiciansApiActions } from './musicians-api.actions'; export const loadAllMusicians = createEffect( ( actions$ = inject(Actions), musiciansService = inject(MusiciansService) ) => { return actions$.pipe( ofType(musiciansPageActions.opened), exhaustMap(() => { return musiciansService.getAll().pipe( map((musicians) => musiciansApiActions.musiciansLoadedSuccess({ musicians }) ), catchError(({ message }: { message: string }) => of(musiciansApiActions.musiciansLoadedFailure({ message })) ) ); }) ); }, { functional: true } ); main.ts import * as musiciansEffects from './app/musicians.effects'; bootstrapApplication(AppComponent, { providers: [ provideStore(), provideState(musiciansFeature), provideEffects(musiciansEffects), ], });
112. musicians.effects.ts import { Actions, createEffect, ofType } from '@ngrx/effects'; import { musiciansPageActions } from './musicians-page.actions'; import { musiciansApiActions } from './musicians-api.actions'; export const loadAllMusicians = createEffect( ( actions$ = inject(Actions), musiciansService = inject(MusiciansService) ) => { return actions$.pipe( ofType(musiciansPageActions.opened), exhaustMap(() => { return musiciansService.getAll().pipe( map((musicians) => musiciansApiActions.musiciansLoadedSuccess({ musicians }) ), catchError(({ message }: { message: string }) => of(musiciansApiActions.musiciansLoadedFailure({ message })) ) ); }) ); }, { functional: true } ); main.ts import * as musiciansEffects from './app/musicians.effects'; bootstrapApplication(AppComponent, { providers: [ provideStore(), provideState(musiciansFeature), provideEffects(musiciansEffects), ], }); musicians.effects.spec.ts import { loadAllMusicians } from './app/musicians.effects'; const result$ = loadAllMusicians( actionsMock, musiciansServiceMock ); expect(result$).toBeObservable(** **. */); expect(musiciansServiceMock, 'getAll').toHaveBeenCalled();
113. https://github.com/markostanimirovic/ngrx-musicians-app Source Code
114. Marko Stanimirović @MarkoStDev Thank You!