4.6 out of 5
4.6
823 reviews on Udemy

NgRx In Depth (Angular 8, with FREE E-Book)

Learn the modern NgRx Ecosystem, including NgRx Store, Effects, Router Store, NgRx Entity, DevTools and Schematics
Instructor:
Angular University
4,049 students enrolled
English [Auto-generated]
Code in Github repository with downloadable ZIP files per section
Become familiar with the centralized store pattern, and how to use it in Angular
Know when to use a centralized store solution and why
Feel comfortable designing an application using the Store pattern
Learn In-depth NgRx Store, understand in detail all core store patterns, including Reducers and Actions
Learn in detail NgRx Effects, learn when to use a side-effect
Learn in detail NgRx Entity, when to use and why, learn what are the benefits
Transform step-by-step an existing Angular plain application, and turn it into a store based application
Learn to implement common functionality in NgRx, such as Authentication or Entity Pagination
Learn NgRx in-depth in a fun and practical way, by implementing real use cases

Why a Store Architecture? (note: this course includes the Typescript Jumpstart E-Book)

One of the most pervasive problems that we will come across as frontend developers are state management issues. These tend to show up eventually in larger applications where we have multiples components that need at the same time display and modify the same shared data, in different points of the component tree.

In these situations, it’s not possible for only one component to load and own a reference to the data, because that data is needed in other parts of the application that the component is not directly linked to.

We would like our view layer to simply update itself automatically whenever the common shared data gets updated by any of the components that are consuming it, without having to create dependencies between those components or calling the server again just to get the latest data and update the view.

Besides the problem of sharing common editable data between components, we want to give our users the best possible experience. We want the application to work as fast as possible, minimizing the need for continuously showing loading indicators to the user, especially if it’s only to keep loading the exact same data from the server over and over again due to router navigation.

This leads to another problem to consider: in an application with a large number of users we would like to minimize the number of API requests that the application makes, in order to allow it to scale more effectively.

Reducing the number of API requests is also important if our application is built on top of a Pay as You Go platform like Firebase or Amazon AWS, where the billing is done per bandwidth consumed.

These design problems are fundamental to UI design and pervasive, but the good news is that all of these are very common architectural problems can be solved in one go using a very elegant architectural solution: the centralized store design.

Course Overview

In this course, we are going to cover in-depth the most commonly used Angular implementation of the centralized store design: we are going to cover the Ngrx Angular Reactive Extensions library ecosystem.

Ngrx is a set of related libraries that together provide a complete solution for implementing a store solution in Angular. We are going to cover Ngrx Store, which contains the reactive store system similar to Redux which is the heart of the store solution.

We are also going to cover Ngrx Effects in-depth, which is a fundamental part of the store architecture as well. We will cover Ngrx Entity which is a practical solution for storing collections in the store.

We will also show how to setup step-by-step the Ngrx DevTools, including the Router Store module, and we will scaffold a good part of our store solution using Ngrx Schematics and the Angular CLI.

What Will You Learn In this Course?

By taking this course you will become comfortable with the centralized store solution in general, and with the Angular Ngrx implementation of that design in particular.

You will feel comfortable designing new Application features using the store design, using a simple methodology and you will know in-depth the complete Ngrx library ecosystem: including Ngrx Store, Effects, and Entity libraries.

You will know how to quickly scaffold parts of the solution using Ngrx Schematics, and how to set up the Ngrx DevTools from scratch, including the router integration.

Introduction

1
Angular NgRx Course Helicopter View
2
Recommended Software Versions
3
The Typescript Jumpstart Ebook
4
Environment Setup - Get the Lessons Code Up and Running
5
Why Ngrx? What Concrete Problems Does it Solve?
6
The Store Architecture in a Nutshell

NgRx Store In Detail

1
Setting Up Ngrx Store with Ngrx Schematics
2
Exploring the Centralized Store Service API
3
Defining our First Ngrx Action using Ngrx Schematics
4
Dispatching an Action - Implementing the Login Component
5
Setting Up the Ngrx DevTools - Demo
6
Understanding Reducers - Writing Our First Reducer
7
How To Define the Store Initial State
8
Speed Up Reducer Development Using Ngrx Schematics
9
Implementing The Logout Action
10
How To Access and Use the NgRx Store Data
11
Understanding Ngrx Selectors - Step-by-Step Explanation
12
Implementing an Authentication Guard in an NgRx Application

NgRx Effects - Store Side Effects Management

1
What is an NgRx Effect? Scaffolding an Effect class using Schematics
2
NgRx Effects - Step-by-Step Implementation of the Login and Logout Effects
3
Keeping the User Logged In After Refresh - Initialization Effects

Essential NgRx Development Tools - NgRx Store Freeze and NgRx Router Store

1
NgRx Store Freeze - Why make the Store State Immutable?
2
Setting up a Time Travelling Debugger with Ngrx Router Store

Ngrx Store, NgRx Effects and NgRx Entity In Depth

1
NgRx Entity - Section Kick Off
2
NgRx Feature Design - Defining the Actions First
3
What does the Store State of an Entity Collection look like?
4
Defining our First NgRx Entity Adapter
5
Implementing a Router Resolver using NgRx Store
6
Loading Data From the Backend using NgRx Effects
7
Implementing an NgRx Entity Reducer, NgRx Entity In Action (Demo)
8
Load All Courses - Action Design and Implementation
9
Courses List Component - Implementing the Store Solution
10
How to use NgRx Selectors - Components as Pure Projections of State
11
Loading a Collection of Entities using an Effect
12
NgRx Effects Conditional Data Loading
13
Learn one of the main benefits of the Store Architecture

NgRx Advanced Example - Pagination with an Angular Material Data Source

1
NgRx Data Pagination - New Section Kickoff
2
Lessons Pagination Feature - NgRx Action Design
3
NgRx Entity Schematics, configuring the Lessons Entity
4
Design and Initial Implementation of the Lessons Pagination Solution
5
Implementing the Lessons Page Selector
6
NgRx Entity - Setting up an Entity Default Sort Order
7
Implementing the Lessons Data Source using the Store
8
Implementing the Load Lessons Page Effect
9
Implementing the Lessons Pagination Feature
10
Implementing a Loading Indicator - Design and Initial Implementation
11
Loading Indicator - Implementation Conclusion
12
Error Handling in NgRx Effects (the correct way)
13
Switching our application to OnPush Change Detection

Course Conclusion

1
Other Courses
2
Bonus Lecture
3
Angular NgRx Course Conclusion
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.6
4.6 out of 5
823 Ratings

Detailed Rating

Stars 5
478
Stars 4
266
Stars 3
61
Stars 2
13
Stars 1
5
866489b724debf9f5dbbb3fa468feed8
30-Day Money-Back Guarantee

Includes

5 hours on-demand video
3 articles
Full lifetime access
Access on mobile and TV
Certificate of Completion