Introducing state management into an application with NgRx

In this workshop, we will gradually introduce state management with NgRx into an existing application. First, we demonstrate how this can be solved using the classic NgRx store and how it ensures clear and efficient management of the application state.

We then modernize the application by introducing the NgRx Signal Store, which offers new approaches to management and reactivity in state management.

Transcript

1. State Management with NgRx Master centralized state management with Classic NgRx, using actions, reducers, effects, and selectors for scalable applications!
2. NgRx Classic Motivation What Is State?
3. NgRx Classic Motivation Dom Is State
4. NgRx Classic Motivation Browser Storage Is State
5. NgRx Classic Motivation Route Is State http://localhost:4200/users?page=1&count=30&sort=asc
6. NgRx Classic Motivation Presentational Components can have State
7. NgRx Classic Motivation Container Components can have State
8. NgRx Classic Motivation Features can have State
9. NgRx Classic Motivation App can have State
10. NgRx Classic Motivation You have to deal with state.
11. App Component 1 Component 2 Component 3 NgRx Classic Motivation
12. App Component 1 Component 2 Component 3 Service 1 Service 2 Service 3 NgRx Classic Motivation
13. App Component 1 Component 2 Component 3 Service 1 Service 2 Service 3 NgRx Classic Motivation
14. App Component 1 Component 2 Component 3 Service 1 Service 2 Service 3 NgRx Classic Motivation
15. App Component 1 Component 2 Component 3 State Service 1 Service 3 Service 2 Reducer Effects NgRx Classic
16. State { ... } NgRx Classic State
17. One "source of truth" Easy to save Easy to debug Undo/Redo Immutables and Observables, Signals Performance Reading: directly Writing: Via Reducer NgRx Classic State
18. State UI Actions Reducer Store defines triggers send to updates contains NgRx Classic
19. export interface TodoState { items: Todo[]; } export const initialState: TodoState = { items: [], }; NgRx Classic
20. export const TodosActions = createActionGroup({ source: '[Todo]', events: { 'Load All Todos': emptyProps(), 'Load All Todos Finished': props<{ products: Product[] }>(), 'Load All Todos Failure': props<{ error: HttpErrorResponse }>(), }, }); 1 2 3 4 5 6 7 8 NgRx Classic
21. export const TodosActions = createActionGroup({ source: '[Todo]', events: { 'Load All Todos': emptyProps(), 'Load All Todos Finished': props<{ products: Product[] }>(), 'Load All Todos Failure': props<{ error: HttpErrorResponse }>(), }, }); 1 2 3 4 5 6 7 8 'Load All Todos': emptyProps(), export const TodosActions = createActionGroup({ 1 source: '[Todo]', 2 events: { 3 4 'Load All Todos Finished': props<{ products: Product[] }>(), 5 'Load All Todos Failure': props<{ error: HttpErrorResponse }>(), 6 }, 7 }); 8 NgRx Classic
22. export const TodosActions = createActionGroup({ source: '[Todo]', events: { 'Load All Todos': emptyProps(), 'Load All Todos Finished': props<{ products: Product[] }>(), 'Load All Todos Failure': props<{ error: HttpErrorResponse }>(), }, }); 1 2 3 4 5 6 7 8 'Load All Todos': emptyProps(), export const TodosActions = createActionGroup({ 1 source: '[Todo]', 2 events: { 3 4 'Load All Todos Finished': props<{ products: Product[] }>(), 5 'Load All Todos Failure': props<{ error: HttpErrorResponse }>(), 6 }, 7 }); 8 'Load All Todos Finished': props<{ products: Product[] }>(), export const TodosActions = createActionGroup({ 1 source: '[Todo]', 2 events: { 3 'Load All Todos': emptyProps(), 4 5 'Load All Todos Failure': props<{ error: HttpErrorResponse }>(), 6 }, 7 }); 8 NgRx Classic
23. export const TodosActions = createActionGroup({ source: '[Todo]', events: { 'Load All Todos': emptyProps(), 'Load All Todos Finished': props<{ products: Product[] }>(), 'Load All Todos Failure': props<{ error: HttpErrorResponse }>(), }, }); 1 2 3 4 5 6 7 8 'Load All Todos': emptyProps(), export const TodosActions = createActionGroup({ 1 source: '[Todo]', 2 events: { 3 4 'Load All Todos Finished': props<{ products: Product[] }>(), 5 'Load All Todos Failure': props<{ error: HttpErrorResponse }>(), 6 }, 7 }); 8 'Load All Todos Finished': props<{ products: Product[] }>(), export const TodosActions = createActionGroup({ 1 source: '[Todo]', 2 events: { 3 'Load All Todos': emptyProps(), 4 5 'Load All Todos Failure': props<{ error: HttpErrorResponse }>(), 6 }, 7 }); 8 'Load All Todos Failure': props<{ error: HttpErrorResponse }>(), export const TodosActions = createActionGroup({ 1 source: '[Todo]', 2 events: { 3 'Load All Todos': emptyProps(), 4 'Load All Todos Finished': props<{ products: Product[] }>(), 5 6 }, 7 }); 8 NgRx Classic
24. export const TodosActions = createActionGroup({ source: '[Todo]', events: { 'Load All Todos': emptyProps(), 'Load All Todos Finished': props<{ products: Product[] }>(), 'Load All Todos Failure': props<{ error: HttpErrorResponse }>(), }, }); 1 2 3 4 5 6 7 8 'Load All Todos': emptyProps(), export const TodosActions = createActionGroup({ 1 source: '[Todo]', 2 events: { 3 4 'Load All Todos Finished': props<{ products: Product[] }>(), 5 'Load All Todos Failure': props<{ error: HttpErrorResponse }>(), 6 }, 7 }); 8 'Load All Todos Finished': props<{ products: Product[] }>(), export const TodosActions = createActionGroup({ 1 source: '[Todo]', 2 events: { 3 'Load All Todos': emptyProps(), 4 5 'Load All Todos Failure': props<{ error: HttpErrorResponse }>(), 6 }, 7 }); 8 'Load All Todos Failure': props<{ error: HttpErrorResponse }>(), export const TodosActions = createActionGroup({ 1 source: '[Todo]', 2 events: { 3 'Load All Todos': emptyProps(), 4 'Load All Todos Finished': props<{ products: Product[] }>(), 5 6 }, 7 }); 8 }, export const TodosActions = createActionGroup({ 1 source: '[Todo]', 2 events: { 3 'Load All Todos': emptyProps(), 4 'Load All Todos Finished': props<{ products: Product[] }>(), 5 'Load All Todos Failure': props<{ error: HttpErrorResponse }>(), 6 7 }); 8 NgRx Classic
25. Reducer Function that executes Action Pure Function (stateless, etc.) Each Reducer gets each Action Check whether Action is relevant This prevents cycles NgRx Classic
26. Reducer (currentState, action) => newState
27. export interface TodoState { items: Todo[]; } export const initialState: TodoState = { items: [], }; const todoReducerInternal = createReducer( initialState, ... ); NgRx Classic - Reducer
28. export interface TodoState { items: Todo[]; } export const initialState: TodoState = { items: [], }; const todoReducer = createReducer( initialState, on(todoActions.loadAllTodosFinished, (state, { payload }) => ({ ...state, items: [...payload] })), ); NgRx Classic - Reducer
29. export interface TodoState { items: Todo[]; } export const initialState: TodoState = { items: [], }; const todoReducer = createReducer( initialState, on(todoActions.addTodoFinished, (state, { payload }) => ({ ...state, items: [...state.items, payload] })), on(todoActions.loadAllTodosFinished, (state, { payload }) => ({ ...state, items: [...payload] })), on(todoActions.loadSingleTodoFinished, (state, { payload }) => ({ ...state, selectedItem: payload })) ); NgRx Classic - Reducer
30. export const routes: Routes = [ { path: 'todo', loadComponent: ..., providers: [ provideState("todos", todoReducer), ], } ]; 1 2 3 4 5 6 7 8 9 NgRx Classic - Feature Abstraction
31. export const routes: Routes = [ { path: 'todo', loadComponent: ..., providers: [ provideState("todos", todoReducer), ], } ]; 1 2 3 4 5 6 7 8 9 provideState("todos", todoReducer), ], export const routes: Routes = [ 1 { 2 path: 'todo', 3 loadComponent: ..., 4 providers: [ 5 6 7 } 8 ]; 9 NgRx Classic - Feature Abstraction
32. export const routes: Routes = [ { path: 'todo', loadComponent: ..., providers: [ provideState("todos", todoReducer), ], } ]; 1 2 3 4 5 6 7 8 9 NgRx Classic - Feature Abstraction { todos: { ... } }
33. export const routes: Routes = [ { path: 'todo', loadComponent: ..., providers: [ provideState("todos", todoReducer), ], } ]; 1 2 3 4 5 6 7 8 9 provideState("todos", todoReducer), export const routes: Routes = [ 1 { 2 path: 'todo', 3 loadComponent: ..., 4 providers: [ 5 6 ], 7 } 8 ]; 9 NgRx Classic - Feature Abstraction { todos: { ... } }
34. Always predictable !!! synchronous per default what about async? NgRx Classic - Reducer
35. NgRx Classic - Effects
36. Async? Effects!!! npm install @ngrx/effects --save NgRx Classic - Effects
37. export const updateTodo = createEffect( (actions$ = inject(Actions)) => { return actions$.pipe( // ... ); }, { functional: true } ); NgRx Classic - Effects
38. export const updateTodo = createEffect( ( actions$ = inject(Actions), todoService = inject(TodoApiService) ) => { return actions$.pipe( ofType(TodoActions.updateTodo), exhaustMap((todo) => { return todoService.update(todo).pipe( map((updatedTodo) => DoggosActions.rateDoggoFinished({ updatedTodo }); ) ); }) ); }, { functional: true } ); NgRx Classic - Effects
39. @Component({ ... }) export class ContentComponent implements OnInit { private readonly store = inject(Store); items$: Observable<Todo[]>; ngOnInit() { ... } } NgRx Classic - Components
40. @Component({ ... }) export class ContentComponent implements OnInit { private readonly store = inject(Store); items$: Observable<Todo[]>; ngOnInit() { this.items$ = this.store.pipe( map((state) => state.todoFeature.items) ); } } NgRx Classic - Components
41. Selectors Traverse the state tree Return pieces of state Memoized NgRx Classic - Selectors
42. export const featureName = 'todoFeature'; export const getTodoFeatureState = createFeatureSelector<TodoState>(featureName); NgRx Classic - Selectors
43. export const featureName = 'todoFeature'; export const getTodoFeatureState = createFeatureSelector<TodoState>(featureName); export const getAllItems = createSelector( getTodoFeatureState, (state: TodoState) => state.items ); NgRx Classic - Selectors
44. export const featureName = 'todoFeature'; export const getTodoFeatureState = createFeatureSelector<TodoState>(featureName); export const getAllItems = createSelector( getTodoFeatureState, (state: TodoState) => state.items ); export const getAllDoneItems = createSelector( getAllItems, (items: Todo[]) => tems.filter(x => x.done) ); export const getAllUndoneItems = createSelector( getAllItems, (items: Todo[]) => tems.filter(x => !x.done) ); NgRx Classic - Selectors
45. @Component({ ... }) export class ContentComponent implements OnInit { private readonly store = inject(Store); items$ = this.store.select(getAllUndoneItems); doneItems$ = this.store.select(getAllDoneItems); ngOnInit() { this.store.dispatch(todoActions.loadAllTodos()); } addTodo(item: string) { this.store.dispatch(todoActions.addTodo({ payload: item })); } markAsDone(item: Todo) { this.store.dispatch(todoActions.setAsDone({ payload: item })); } } NgRx Classic - Selectors
46. @Component({ ... }) export class ContentComponent implements OnInit { private readonly store = inject(Store); items = this.store.selectSignal(getAllUndoneItems); doneItems = this.store.selectSignal(getAllDoneItems); ngOnInit() { this.store.dispatch(todoActions.loadAllTodos()); } addTodo(item: string) { this.store.dispatch(todoActions.addTodo({ payload: item })); } markAsDone(item: Todo) { this.store.dispatch(todoActions.setAsDone({ payload: item })); } } NgRx Classic - Selectors
47. Demo & Tasks Lets code !