Venmo
Reactive Angular with NgRx
3 hours, 14 minutes
CC
Course Description
Learn to use Angular with NgRx and RxJs to drastically simplify state management and flow control while cutting down on code volume. We'll integrate NgRx into our app and walk through how to work with stores, actions, reducers, selectors, dev tools and introduce NgRx entity to simplify things even further.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseCourse Details
Published: January 7, 2019
Topics
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 15 minutes
Lukas gives reasoning for why this course was created, introduces the audience to several NgRx packages.
Lukas walks through the course repository, and sets expectations about what will be covered.
NgRx Store
Section Duration: 51 minutes
Lukas gives a high-level explanation of what Redux and NgRx attempt to solve in applications.
Lukas defines the shape of the state, the initial state, and the reducer in the project module.
Lukas takes the feature-level reducer that was created in the last section, and combines it with the customers reducer to become a top-level reducer
Lukas pulls the projects out of the component, into the store, selects it, and brings it into the app.
Lukas creates a switch statement in the project reducer to handle the create, update, and delete methods.
Lukas rehydrates update, create, and delete in the project component.
Lukas demonstrates some of the features of the Redux devtools, and explains how they help to map out the state of the application at any given instance.
Questions are asked about concerns regarding the size of the state tree, and about initial state.
Actions & Entities
Section Duration: 31 minutes
Lukas discusses the importance of uniquely named action keys, and refactors the reducers to reflect this.
Lukas refactors the project reducers to use the project actions. The generic JavaScript objects are also removed, and made them strongly typed.
Lukas redefines the shape of the state. The entity adapter is created, and the initial state is defined.
Lukas refactors the way that data is looked up. The project reducer is refactored to use NgRx entity.
Selectors & Side Effects
Section Duration: 42 minutes
Lukas creates low level selectors, then exposes them in the top level selector for consumption.
Lukas describes what effects are, and implements them in the application.
Lukas describes data persistence within effects and wires it up to the application.
Lukas debugs the application, explains why this step was vital, and summarizes the section.
A question is asked regarding how to handle a sequence, and Lukas explains how the application could be further refactored.
Selectors & Facades
Section Duration: 31 minutes
Lukas explains how to take a selector, and shows how to use combinatory logic to produce a new data structure to meet the needs of the application.
Lukas explains why the Faced pattern can make sense for an application, and implements it in the application.
Lukas explains use cases and why the Facade pattern may make sense for an application.
Conclusion
Section Duration: 21 minutes
Lukas summarizes what was covered in the course, and introduces reasoning why the different tools might be used.
Lukas fields final questions from students such as how to ensure that the application has the last state when accessing a selector from an effect, whether the store is a sort of cache, clarification on what an Observable is, change detection, testing when using the Facade pattern, and a clarification on the index.ts "barrel roll".
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops