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

Reviewers

This book would not have been possible without the help of several reviewers who helped me to:

1

fix code errors

2

correct my poor English

3

improve poorly presented concepts

4

add tips and additional notes

In alphabetical order:

Name	Job	Profile
Alberto Bellemo Bullo	Team Leader	• Youtube • Twitch • Linkedin
Alessandro Nestola	FullStack Developer	• LinkedIn • WebSite • GitHub
Angelo Cappelletti	Senior Frontend Developer	• LinkedIn • GitHub
Dario Del Giudice	Full stack developer	• LinkedIn
Enrico Franchetti	Full-stack Developer	• LinkedIn • GitHub
Giuseppe De Masi	UI - UX Designer / Front End Developer	• LinkedIn • Instagram • GitHub
Marco Gallo	Web Developer/Entrepreneur	• LinkedIn • GitHub
Matteo Pietro Dazzi	Staff Developer	• LinkedIn • GitHub
Michele Fenu	UX Engineer	• LinkedIn • GitHub
Pier Daniele Cretara	Senior Full Stack Engineer	• LinkedIn • GitHub
Pietro Lanza	Student / Web Developer	• LinkedIn • GitHub

Send your feedback