NgRx - Core Principles & New Features Marko Stanimirović 

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 

What is NgRx? 

Framework for building reactive applications in Angular Provides State, Data, View, and Tooling packages 

State Packages 

State Packages ★ @ngrx/store 

State Packages ★ @ngrx/store ★ @ngrx/effects 

State Packages ★ @ngrx/store ★ @ngrx/effects ★ @ngrx/router-store 

State Packages ★ @ngrx/store ★ @ngrx/effects ★ @ngrx/router-store ★ @ngrx/entity 

State Packages ★ @ngrx/store ★ @ngrx/effects ★ @ngrx/router-store ★ @ngrx/entity ★ @ngrx/component-store 

Data Packages 

Data Packages ★ @ngrx/data 

View Packages 

View Packages ★ @ngrx/component 

Tooling Packages 

Tooling Packages ★ @ngrx/store-devtools 

Tooling Packages ★ @ngrx/store-devtools ★ @ngrx/schematics 

Tooling Packages ★ @ngrx/store-devtools ★ @ngrx/schematics ★ @ngrx/eslint-plugin 

NgRx Store 

Inspired by Redux Powered by RxJS 

Component Store 

Component Store Action 

Reducer Component Store Action 

Reducer Component Store Selector Action 

Let’s create an app with NgRx! 

Let’s create an app with NgRx! 

Actions 

musicians-page.actions.ts 

musicians-page.actions.ts import { createAction } from '@ngrx/store'; export const opened = createAction( '[Musicians Page] Opened' ); 

musicians-page.actions.ts import { createAction } from '@ngrx/store'; export const opened = createAction( '[Musicians Page] Opened' ); source event 

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 }>() ); 

musicians-api.actions.ts 

musicians-api.actions.ts import { createAction, props } from '@ngrx/store'; export const musiciansLoadedSuccess = createAction( '[Musicians API] Musicians Loaded Success', props<{ musicians: Musician[] }>() ); 

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 }>() ); 

Reducer 

musicians.reducer.ts 

musicians.reducer.ts export interface State { musicians: Musician[]; isLoading: boolean; query: string; } 

musicians.reducer.ts export interface State { musicians: Musician[]; isLoading: boolean; query: string; } const initialState: State = { musicians: [], isLoading: false, query: '', }; 

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( ); 

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, ); 

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 }) ), ); 

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 

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 }) ) ); 

Providing Store and Registering Reducers 

main.ts import { bootstrapApplication } from '@angular/platform-browser'; bootstrapApplication(AppComponent, { providers: [ ], }); Providing Store and Registering Reducers 

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 

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 

Selectors 

musicians.selectors.ts 

musicians.selectors.ts import { createFeatureSelector } from '@ngrx/store'; import * as fromMusicians from './musicians.reducer'; export const selectMusiciansState = createFeatureSelector('musicians'); 

musicians.selectors.ts import { createFeatureSelector, createSelector } from '@ngrx/store'; import * as fromMusicians from './musicians.reducer'; export const selectMusiciansState = createFeatureSelector('musicians'); export const selectMusicians = createSelector( selectMusiciansState, (state) => state.musicians ); 

musicians.selectors.ts import { createFeatureSelector, createSelector } from '@ngrx/store'; import * as fromMusicians from './musicians.reducer'; export const selectMusiciansState = createFeatureSelector('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 ); 

musicians.selectors.ts import { createFeatureSelector, createSelector } from '@ngrx/store'; import * as fromMusicians from './musicians.reducer'; export const selectMusiciansState = createFeatureSelector('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)) ); 

Container Component 

musicians.component.ts @Component({ selector: 'app-musicians', changeDetection: ChangeDetectionStrategy.OnPush, }) export class MusiciansComponent implements OnInit { } 

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); } 

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()); } } 

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 }) ); } } 

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 }) ); } } 

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 }) ); } } 

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 }) ); } } 

musicians.component.ts musicians.component.html

Find Your Favorite Musicians=/h1> =/app-search-box> =/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 }) ); } } 

NgRx Effects 

Isolating side effects for cleaner component architecture Handling side effects in a reactive way 

Reducer Component Store Selector Action Effect 

Reducer Component Store Selector Action Effect 

Reducer Component Store Selector Action Effect 

musicians.effects.ts @Injectable() export class MusiciansEffects { } 

musicians.effects.ts import { Actions } from '@ngrx/effects'; @Injectable() export class MusiciansEffects { private readonly actions$ = inject(Actions); } 

musicians.effects.ts import { Actions, createEffect } from '@ngrx/effects'; @Injectable() export class MusiciansEffects { private readonly actions$ = inject(Actions); readonly loadAllMusicians$ = createEffect(() => { }); } 

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( ); }); } 

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) ); }); } 

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( ); }) ); }); } 

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 }) ), ); }) ); }); } 

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 })) ) ); }) ); }); } 

Registering Effects 

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 

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 

New Features ★ Action Group Creator ★ Feature Creator ★ Functional Effects 

Action Group Creator 

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/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 

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 

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 

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 

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 

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({ }); 

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', }); 

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 }>(), }, }); 

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 }); 

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% 

Feature Creator 

What is NgRx Feature? 

Reducer 

Reducer Feature Name 

Reducer Feature Name Selectors 

Reducer Feature Name Selectors NgRx Feature 

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('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)) ); 

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('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)) ); 

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('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)) ); 

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('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)) ); 

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('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)) ); 

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('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)) ); 

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), ], }); 

Functional Effects 

musicians.effects.ts 

musicians.effects.ts import { createEffect } from '@ngrx/effects'; export const loadAllMusicians = createEffect( ( ) => { }, ); 

musicians.effects.ts import { Actions, createEffect } from '@ngrx/effects'; export const loadAllMusicians = createEffect( ( actions$ = inject(Actions), musiciansService = inject(MusiciansService) ) => { }, ); 

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 })) ) ); }) ); }, ); 

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 } ); 

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.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(); 

https://github.com/markostanimirovic/ngrx-musicians-app Source Code 

Marko Stanimirović @MarkoStDev Thank You!