Learning NgRx
1h 13mIntermediate2018-08-03
Authors

Alain R. Chautard
Google Developer Expert in web technologies and Angular
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. NgRx has quickly become the go-to solution for state management in large Angular applications. In this training course, you can learn about Redux—the JavaScript library for managing application state—and how NgRx provides an Angular-specific implementation of Redux that supports lazy-loaded modules, observables, and asynchronous side effects. 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, see to build a robust component architecture with NgRx.
Learning objectives
State management basics: State, actions, reducers, and the NgRx store
Describing state
Dispatching actions
Listening to state updates
Effects
Debugging
Selector functions
Entities
Component architecture
Learning objectives
State management basics: State, actions, reducers, and the NgRx store
Describing state
Dispatching actions
Listening to state updates
Effects
Debugging
Selector functions
Entities
Component architecture
Skills covered
AngularFull-Stack Web DevelopmentFront-End Web DevelopmentLearningWeb DevelopmentOpen Source
Concepts
0. Introduction
- 01 - Improve your Angular architecture with NgRx
- 02 - What you should know
1. Redux and State Management
- 03 - What is state management all about
- 04 - Core concepts - State and actions
- 05 - Core concepts - Reducers and store
- 06 - Challenge - Brainstorm state and actions for a weather app
- 07 - Solution - Short video
2. Introduction to NgRx
- 08 - Describing state with NgRx
- 09 - Actions with NgRx
- 10 - Reducers in NgRx
- 11 - The NgRx store - Dispatch an action
- 12 - The NgRx store - Listen to state updates
- 13 - Set up effects for asynchronous tasks
- 14 - Implementation of effects
- 15 - Challenge - Complete the code in the project to remove a zip code from the list
- 16 - Solution - Source code with comments
3. Advanced NgRx
- 17 - Debugging NgRx applications
- 18 - Using selector functions
- 19 - The NgRx router store
- 20 - Entities to manage record collections
- 21 - Challenge - Use NgRx to load forecast data
- 22 - Solution - Source code with comments
4. Component Architecture
- 23 - Overview of component architecture with NgRx
- 24 - Component architecture in action
Conclusion
- 25 - Next steps