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

3. NGRX API

3. NGRX API

Let's dive deeper into the use of NGRX

1 min

v.18

v.18

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Introduction

In this chapter you'll learn how to use the latest NGRX API and utilities:

1

createReducer: an NGRX utility to simplify the creation of typed reducers

2

createAction and createActionGroup: some utilities to simplify the definition of actions

3

createFeature: a cool way to write reducers and automatically create selectors

4

selectors and extraSelectors: how to get a portion of state from the store

5

Linting and NGRX Runtime checks: check for clean coding and use Angular & NGRX best practices

6

Lazy Loaded store: improve performance and load a portion of state only when necessary

7

and much more...

Send your feedback