Angular State Management with NgRx

Course details

Once you've worked with Angular awhile, you discover that the difficult part of architecting apps is making sure data flows and is refreshed in the UI in a consistent way. This process is called state management. In this course, Instructor Alain Chautard teaches the principles of state management in the context of reactive programming, giving you a solid foundation for your Angular architecture. Learn how to react to and trigger state changes, dispatch actions, and work with effects, selectors, and entities. Plus, find out to build a robust component architecture with NgRx, including the recently added signal store. NgRx has quickly become the go-to solution for state management in large Angular applications, and Alain makes sure you know how to use NgRx to provide an Angular-specific implementation of Redux that supports lazy-loaded modules, observables, and asynchronous side effects.

Learning objectives
Learn about all state management concepts: State, actions, reducers, and the NgRx store.
Determine how to create an application architected with NgRx.
Select between different NgRx concepts such as entities, effects, signal store, and router store.

Concepts

0. Introduction

01 - Improve your Angular architecture with NgRx

1. Redux and State Management

02 - What is state management all about
03 - Core concepts - State and actions
04 - Core concepts - Reducers and store
05 - Challenge - Brainstorm state and actions for a weather app
06 - Solution - Brainstorm state and actions for a weather app

2. Introduction to NgRx

07 - Describing state with NgRx
08 - Actions with NgRx
09 - Reducers in NgRx
10 - The NgRx store - Dispatch an action
11 - The NgRx store - Listen to state updates
12 - Set up effects for asynchronous tasks
13 - Implementation of effects
14 - Challenge - Remove a zip code from the list
15 - Solution - Remove a zip code from the list

3. Advanced NgRx

16 - Debugging NgRx applications
17 - Using selector functions
18 - The NgRx router store
19 - Entities to manage record collections
20 - Challenge - Use NgRx to load forecast data
21 - Solution - Use NgRx to load forecast data

4. Component Architecture

22 - Overview of component architecture with NgRx
23 - Component architecture in action

5. Using SignalState Instead of RxJS

24 - Introduction to Angular Signals
25 - Creating and using SignalState
26 - Using rxMethod and patchState to load and update data
27 - Challenge - Use SignalState in our application
28 - Solution - Use SignalState in our application

6. Signal Store for Signal-Based State Management

29 - Introduction to SignalStore
30 - Hooks and methods for SignalStore
31 - Adding custom store features
32 - Challenge - Create your first SignalStore
33 - Solution - Create your first SignalStore

Conclusion

34 - Next steps in your Angular journey