Angular architectures with NGRX

NGRX Mini Video course

Italian Version

English Version (audio by AI)

NGRX Fundamentals

1. Redux & NGRX

State management in SPA

NGRX introduction

State Managers comparison

NGRX: how it works

Redux Dev Tools

Why should my team use NGRX?

Create the Project

Installation, store & reducers

TIP 💡: Redux Dev Tools and StackBlitz

Store selectors

TIP 💡: Immutability, Pure Functions & Reducers

Create Feature and Selectors

TIP 💡: Linter & Runtime Checks

NGRX and Signals

createSelector & extraSelectors

Build a Shopping Cart

4. The Shop Page

Create a REST API server

Product Actions

RxJS & Flattening operators

Handle errors in NGRX Effects

Products Reducer

UI the shop page

Demo & Source Code

5. Build a Shopping Cart

Build the Cart Page

Handle quantity

Sync store with Local Storage

Demo & Source Code

6. Shop Filters

Filter Component

Introduction to Reactive Forms

Container vs Presentational components

Reactive Forms and NGRX

Save Filters in Store

Filters Selectors

Side Panel UI State

Insight 💡: How to fix linter errors

Demo & Source Code

Create the "Shop Order" route

Create the Layout

Order Reactive form

Demo & Source Code

Reserved Area

8. CRUD: Simple CMS

Route and Layout

Product Actions

DELETE: delete products

POST: add new product

PATCH: edit existing products

Improvements, Linter & Fixes

Refactoring: Move logic in Effects

Refactoring: Move to Components

Demo & Source Code

9. Authentication

Auth Effects: create sequences of effects

Auth: extraSelectors

Sync store with Local Storage

Auth Interceptor

Dom Protection with custom directives

Demo & Source Code

10. Router & NGRX

BONUS: NGRX Signals

SignalStore: create the store

Work with Collections

Debug with Angular Extension

Computed signals

Store Methods: add & delete

Layout Improvements

Store Composition: add filters

async operations and rxMethod

NGRX Mini Video Course

NGRX Mini Video Course

An introduction to Angular & NGRX v.18

1 min

v.18

v.18

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Introduction

This mini course consisting of 8 videos is not a complete course but just a way to get closer to the world of NGRX and prove that its integration isn’t as complex as ever.

Although the concepts are not fully explained as in the book, these videos should provide you a quick overview about NGRX and Redux Dev Tools.

# Goal

The aim is to intrigue the reader and make him understand in a few minutes the potential of NGRX and the simplicity with which it can be configured and used today.

It’s also a way to start understanding the benefits of using Redux Dev Tools.

Topics

1

NGRX installation

2

Store configuration

3

Selectors

4

Actions and Reducers

5

Selectors

6

createAction, createReducer and createFeature

English translations by AI

I created this mini video course in Italian to promote this book in the country where I live. However, you will also find the English version.

For the first time I wanted to try creating videos using AI tools. So the videos in English do not contain my voice but I think they are still useful

Send your feedback