NgRx (with NgRx Data) - The Complete Guide (FREE E-Book)

6h 11m 19s
English
Paid

Course description

This course is a complete guide to the new NgRx Ecosystem, including NgRx Data, Store, Effects, Router Store, NgRx Entity, and DevTools, and comes with a running Github repo.

Read more about the course

This Course in a Nutshell

State management is the number one topic to know when it comes to frontend architecture design choices. Why choose to do state management in a single page application, when to do it and why, what are the benefits, and what are tradeoffs?

These are all critical questions that we will address in this course, as we give you an extended guided tour of the NgRx Ecosystem.

The most popular state management library in the Angular space is NgRx, and for good reasons. The latest release of NgRx is probably one of the most important releases in the whole Angular ecosystem recently. Although backward compatible, it contains so much new functionality that it's almost a brand new state management library.

Under the hood, the core concepts of Actions, Reducers, Effects, Entities, and Selectors remain the same, but we have now a brand new API for managing these concepts in a much less verbose way. Also, we have the inclusion of NgRx Data, which is a new and very powerful way of managing Entity Data.

Actually, NgRx Data is a powerful abstraction layer on top of NgRx, that allows us to add state management to large parts of our application without having to write much code at all!

Course Overview

In this course, we are going to take a small existing application that is built without any state management. We are going to understand what are the consequences of not doing state management by identifying some problems that the application has in its initial form.

Then we are going to start refactoring the application, and we are going to add state management to the application multiple screens step-by-step. We are going to start with the Authentication features of the application, and then we are going to move on to the entity data management part.

We are going to explain at length all the key concepts of NgRx: Actions, Reducers, Effects, and Selectors, and we are going to explain in detail the Store architecture itself and understand its benefits.

Throughout the course we are going to introduce step-by-step and explain in detail the NgRx Store module, NgRx Effects, we are going to cover in detail NgRx Entity and the Entity format, we are going to install and do a guided tour of the NgRx Dev Tools, the NgRx Router Store, and the time-travelling debugger.

We are also going to learn how to make the most out of NgRx Data, and learn how to customize it in order to manage entity data with minimal application code. We will cover NgRx while keeping in mind best practices like good Action hygiene.

Table of Contents

This course covers the following topics:

  • Introduction to State Management

  • The Store Architecture In Detail

  • NgRx Key Concepts

  • Actions and Action Creators

  • Reducers

  • NgRx Effects

  • Selectors

  • Adding Authentication to an NgRx Application

  • NgRx Entity and the Entity Format

  • NgRx DevTools

  • NgRx Time Travelling Debugger

  • NgRx Runtime checks and Store Immutability

  • NgRx Router Store

  • NgRx Data and Entity State Management

  • NgRx Best Practices

What Will You Learn In this Course?

At the end of this course, you will feel comfortable with the notions of state management and the centralized store solution in general.

You will feel comfortable designing new Applications using NgRx, using a simple methodology and you will know in-depth the complete Ngrx library ecosystem: including the Ngrx Store, Effects, Entity, and NgRx Data 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.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 48 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online NgRx (with NgRx Data) - The Complete Guide (FREE E-Book)

0:00
/
#1: NgRx (with NgRx Data) - Helicopter View

All Course Lessons (48)

#Lesson TitleDurationAccess
1
NgRx (with NgRx Data) - Helicopter View Demo
06:37
2
NgRx The Complete Guide - Development Environment Setup
08:04
3
What is NgRx, Why State Management and what are the benefits?
11:47
4
Installing NgRx and the NgRx DevTools
07:13
5
Configuring an NgRx Feature Module using NgRx Schematics
08:17
6
The Store Service API - Implementing the Login Screen
07:29
7
Defining NgRx Actions using Action Creators
11:10
8
Grouping Actions Together with Action Types
03:45
9
NgRx Reducers - Step-by-Step Implementation
08:56
10
Key Concepts Summary - NgRx Actions and Reducers In Action
06:01
11
How to Query the Store Data - An Example
12:38
12
NgRx Selectors - An In-Depth Explanation
12:01
13
NgRx Feature Selectors - a Simple Explanation
04:56
14
Implementing User Logout (Practice Lesson )
04:31
15
Implementing a Router Authentication Guard (Practice Lesson)
08:13
16
Introduction to NgRx Effects - What is a Side Effect?
05:50
17
Understanding NgRx Effects - A Simple Example
07:17
18
NgRx Effects - Step-by-Step Implementation
08:39
19
Implementing the Logout Effect (Practice Lesson)
06:53
20
Setting up NgRx Router Store and the Time-Travelling Debugger
10:34
21
NgRx Runtime Checks - How do they work?
08:31
22
NgRx Metareducers - Step-by-Step Implementation
06:50
23
NgRx Entity - Section Kickoff
03:36
24
NgRx Feature Design - Defining Actions First
06:08
25
Loading NgRx Entity Data using a Router Resolver
10:18
26
NgRx Effects - Fetching Data From the Backend
06:57
27
Understanding the NgRx Entity Format
05:54
28
Implementing Reducers Using the NgRx Entity Adapter
08:12
29
NgRx Entity Selectors - Refactoring the Home Component
10:08
30
Entity Adapter Configuration - Understanding sortComparer and selectId
04:26
31
NgRx Data Fetching Solution - How to Load Data Only If Needed
10:34
32
Optimistically Editing Entity Data - The Edit Course Dialog
10:43
33
Optimistic Data Editing - Reducer Implementation and Demo
04:07
34
Optimistic Data Editing - Saving Data in the background with an Effect
06:01
35
Why NgRx Data? New Section Introduction
05:54
36
Setting Up NgRx Data in a Lazy Loaded Module
08:24
37
How Does NgRx Data Work? Transparent Fetching Data In Action
09:12
38
NgRx Custom Data Service - Fetching Data From the Backend
11:21
39
Controlling Data Loading with the NgRx Data loaded flag
05:19
40
Querying Store Data with NgRx Data and the entities$ Observable
08:17
41
NgRx Data CRUD - Why use Optimistic Updates?
13:23
42
NgRx Data CRUD - Why Pessimistic Data Creation?
06:44
43
NgRx Data CRUD - Optimistic Delete Implementation
07:09
44
Setting Up a new Entity - The Lesson Entity
03:43
45
Implementing the Course Component Using NgRx Data
05:16
46
Lessons Pagination using NgRx Data
12:13
47
Switching an NgRx Application to OnPush Change Detection
06:39
48
Angular NgRx Course Conclusion
04:29

Unlock unlimited learning

Get instant access to all 47 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Angular 9 Firebase Project Course

Angular 9 Firebase Project Course

Sources: fireship.io
The Angular Firebase PWA Course will teach you how to build a complex progressive web app with Angular 9 (ivy), Material Design, and Firebase. It starts from absolute basics and...
2 hours 46 minutes 56 seconds
Angular 2 Fundamentals

Angular 2 Fundamentals

Sources: ultimatecourses.com
This course teaches you to make informed decisions by diving deep into real concepts, architecture, and unidirectional dataflow. We then weave our way through t
5 hours 6 minutes 53 seconds
Complete Angular Developer in 2025 Zero to Mastery

Complete Angular Developer in 2025 Zero to Mastery

Sources: zerotomastery.io
Learn Angular from a senior industry professional. This is the only Angular course you need to learn Angular, build enterprise-level applications from scratc...
52 hours 28 minutes 39 seconds