NgRx (with NgRx Data) – The Complete Guide (Angular 18)

NgRx (with NgRx Data) – The Complete Guide (Angular 18), available at $84.99, has an average rating of 4.52, with 51 lectures, based on 6609 reviews, and has 30094 subscribers.

You will learn about 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 Learn how to use NgRx Data to handle entity data with minimal code 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 This course is ideal for individuals who are Angular Developers looking to learn in-depth the modern NgRx Ecosystem, including Ngrx Store, Effects, Router Store, Ngrx Entity, DevTools and Schematics! It is particularly useful for Angular Developers looking to learn in-depth the modern NgRx Ecosystem, including Ngrx Store, Effects, Router Store, Ngrx Entity, DevTools and Schematics!.

Enroll now: NgRx (with NgRx Data) – The Complete Guide (Angular 18)

Summary

Title: NgRx (with NgRx Data) – The Complete Guide (Angular 18)

Price: $84.99

Average Rating: 4.52

Number of Lectures: 51

Number of Published Lectures: 51

Number of Curriculum Items: 51

Number of Published Curriculum Objects: 51

Original Price: $74.99

Quality Status: approved

Status: Live

What You Will Learn

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
Learn how to use NgRx Data to handle entity data with minimal code
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

Who Should Attend

Angular Developers looking to learn in-depth the modern NgRx Ecosystem, including Ngrx Store, Effects, Router Store, Ngrx Entity, DevTools and Schematics!

Target Audiences

Angular Developers looking to learn in-depth the modern NgRx Ecosystem, including Ngrx Store, Effects, Router Store, Ngrx Entity, DevTools and Schematics!

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

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

Course Curriculum

Chapter 1: Introduction

Lecture 1: NgRx (with NgRx Data) – Helicopter View

Lecture 2: IMPORTANT – Recommended Software Versions

Lecture 3: NgRx The Complete Guide – Development Environment Setup

Lecture 4: The Typescript Jumpstart Ebook

Lecture 5: What is NgRx, Why State Management and what are the benefits?

Lecture 6: Installing NgRx and the NgRx DevTools

Chapter 2: NgRx Key Concepts – Actions and Reducers

Lecture 1: Configuring an NgRx Feature Module using NgRx Schematics

Lecture 2: The Store Service API – Implementing the Login Screen

Lecture 3: Defining NgRx Actions using Action Creators

Lecture 4: Grouping Actions Together with Action Types

Lecture 5: NgRx Reducers – Step-by-Step Implementation

Lecture 6: Key Concepts Summary – NgRx Actions and Reducers In Action

Chapter 3: NgRx Key Concepts – Selectors and Effects

Lecture 1: How to Query the Store Data – An Example

Lecture 2: NgRx Selectors – An In-Depth Explanation

Lecture 3: NgRx Feature Selectors – a Simple Explanation

Lecture 4: Implementing User Logout (Practice Lesson )

Lecture 5: Implementing a Router Authentication Guard (Practice Lesson)

Lecture 6: Introduction to NgRx Effects – What is a Side Effect?

Lecture 7: Understanding NgRx Effects – A Simple Example

Lecture 8: NgRx Effects – Step-by-Step Implementation

Lecture 9: Implementing the Logout Effect (Practice Lesson)

Chapter 4: NgRx Development Tools In Depth

Lecture 1: Setting up NgRx Router Store and the Time-Travelling Debugger

Lecture 2: NgRx Runtime Checks – How do they work?

Lecture 3: NgRx Metareducers – Step-by-Step Implementation

Chapter 5: NgRx Entity In Depth

Lecture 1: NgRx Entity – Section Kickoff

Lecture 2: NgRx Feature Design – Defining Actions First

Lecture 3: Loading NgRx Entity Data using a Router Resolver

Lecture 4: NgRx Effects – Fetching Data From the Backend

Lecture 5: Understanding the NgRx Entity Format

Lecture 6: Implementing Reducers Using the NgRx Entity Adapter

Lecture 7: NgRx Entity Selectors – Refactoring the Home Component

Lecture 8: Entity Adapter Configuration – Understanding sortComparer and selectId

Lecture 9: NgRx Data Fetching Solution – How to Load Data Only If Needed

Lecture 10: Optimistically Editing Entity Data – The Edit Course Dialog

Lecture 11: Optimistic Data Editing – Reducer Implementation and Demo

Lecture 12: Optimistic Data Editing – Saving Data in the background with an Effect

Chapter 6: NgRx Data In Depth

Lecture 1: Why NgRx Data? New Section Introduction

Lecture 2: Setting Up NgRx Data in a Lazy Loaded Module

Lecture 3: How Does NgRx Data Work? Transparent Fetching Data In Action

Lecture 4: NgRx Custom Data Service – Fetching Data From the Backend

Lecture 5: Controlling Data Loading with the NgRx Data loaded flag

Lecture 6: Querying Store Data with NgRx Data and the entities$ Observable

Lecture 7: NgRx Data CRUD – Why use Optimistic Updates?

Lecture 8: NgRx Data CRUD – Why Pessimistic Data Creation?

Lecture 9: NgRx Data CRUD – Optimistic Delete Implementation

Lecture 10: Setting Up a new Entity – The Lesson Entity

Lecture 11: Implementing the Course Component Using NgRx Data

Lecture 12: Lessons Pagination using NgRx Data

Lecture 13: Switching an NgRx Application to OnPush Change Detection

Chapter 7: Course Conclusion

Lecture 1: Bonus Lecture (Updated August 2024)

Lecture 2: Angular NgRx Course Conclusion

Instructors

Angular University
Best Selling Angular Courses | 200k+ students | 17 courses

Rating Distribution

1 stars: 58 votes
2 stars: 97 votes
3 stars: 513 votes
4 stars: 2306 votes
5 stars: 3635 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

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!

Menu