Angular State Management with NgRx

Understand the principles of Angular NGRX architecture Develop efficient state management solutions using NGRX Store Implement reactive programming concepts with NGRX Effects Utilize NGRX Router Store for managing route state Integrate NGRX into Angular applications for enhanced scalability and maintainability

Instructors:

SJ Sushmitha J

Start Learning

7 Enrolled

63 Lessons

This comprehensive course on Angular NGRX provides a deep dive into state management techniques for Angular applications. From understanding the fundamentals of NGRX to mastering advanced concepts like Actions, Reducers, Selectors, and Effects, this course equips you with the knowledge and skills to build robust and scalable Angular applications. Through a combination of theory and hands-on exercises, you'll learn how to structure your application's state, handle asynchronous operations, and manage complex application logic using NGRX. By the end of the course, you'll be able to leverage the power of NGRX to create high-performance Angular applications with efficient state management.

Course Content

Introduction

Intro

Note

Angular State Management with NgRx Module 1

Introduction to Angular NGRX State Management

Understand Redux Pattern Structure

How Store State, Actions and Reducers

Implement Counter Application without NGRX

Implement the Counter Application using NGRX Store

Refactoring Store state

Pass Custom Data using Props in Actions

Disadvantages of not using create Selectors

Using CreateFeatureSelector and createSelector

Implement Routing for the state management

Angular State Management with NgRx Module 2

Install Redux Chrome Extension

Combining all the different modules of the state

Implement the AppState

Get Async Data

Create Reactive Form

Adding Posts into the ngrx state

Props in Ngrx Selectors

Update Post in Ngrx store

Delete Post in the Ngrx store

Implement Lazyloading

Angular State Management with NgRx Module 3

Lazy load the ngrx state

Design Auth Login Module

Ngrx Effects Library

How to Define the Ngrx Effect

Adding Auth Feature State

Implement first Effects file

Save the User token data from Login

Implement Shared Loading Spinner Component

Implement Error handling in ngrx effects

Navigating the page using routes with Effects

Angular State Management with NgRx Module 4

Create Signup Form and ngrx actions

Add Signup Effects to make API call

Implement auto Login Functionality

Implement Auto Logout Functionality in the ngrx

Get Posts Data from backend HTTP API

Adding Post Data by making Http Post API

Update and Delete Posts Data

Implement auth user token for http API

Access ngrx state in CanActivate Route Guard

Fixing the logout bug

Angular State Management with NgRx Module 5

Introduction to NGRX Router Store

Implement Custom Serializer

Use Router State Params

Using Ngrx Router Store

Introduction to Ngrx Entity

Implement CRUD operations

Ngrx Entity Selector Adapter

Remove unwanted Http Api Calls

Ngrx Entity Configuration

Introduction to Ngrx data

Angular State Management with NgRx Module 6

Setup new Project for Ngrx Data

Create a Service class for the ngrx data

Create Default Data Service

Get the data from the store

Implement the add Post form

Update Post Details

Delete Post Data

Show the Single Post

Use Ngrx Data in the Lazy Loaded Modules

Completing Angular Ngrx Course

Assessment on Angular State Management with NgRx

Reviews

Review the course

Help us improve our course material.

Write a review