HomeCoursesMastering State Management with Angular and NgRx

4.5

Beginner

15h

Updated 4 months ago

Mastering State Management with Angular and NgRx

Gain insights into state management in Angular with NgRx. Learn to use store, actions, reducers, selectors, handle side effects, and write unit tests for scalable applications.

Join 2.7 million developers at

Overview

Content

Reviews

This course is designed to teach you how to manage states in Angular using the powerful NgRx library. You’ll learn the fundamentals of state management and how it can be implemented in an Angular application using NgRx. Next, you’ll learn how to use the NgRx store, actions, reducers, and selectors to manage the application states and handle complex data. You’ll also learn how to handle side effects and asynchronous operations in an Angular application. Throughout the course, you’ll gain hands-on experience in implementing state management using interactive projects. You’ll learn best practices and design patterns for state management in Angular and how to structure the state of an application using NgRx. Additionally, you’ll learn how to write unit test cases for NgRx features. By the end of the course, you’ll be able to implement and debug states in an Angular application. You’ll be able to create more scalable, maintainable, and testable Angular applications that can handle complex states and data.

This course is designed to teach you how to manage states in Angular using the powerful NgRx library. You’ll learn the fundamen...Show More

WHAT YOU'LL LEARN

An understanding of state management and its implementation using Angular and NgRx

Proficiency in using the NgRx store, actions, reducers, and selectors to manage states

A working knowledge of NgRx effects to handle side-effects

The ability to debug states using the NgRx developer tools

Hands-on experience in implementing an online book store using NgRx features

The ability to write unit test cases for NgRx features

An understanding of state management and its implementation using Angular and NgRx

Content

58 Lessons2 Projects7 Quizzes3 Challenges

Getting Started

2 Lessons

Get familiar with state management in Angular through NgRx, from basics to advanced projects.

Course Introduction

Course Project: Online Bookstore

Redux Fundamentals

9 Lessons

Unpack the core of Redux principles, state management, store structure, actions, reducers, and their benefits.

Introduction to Redux

Redux Principles

What is the Redux State?

Redux Store

Dealing with Actions in Redux

Reducers

Benefits of Redux

Summary: Redux Fundamentals

Quiz: Redux Fundamentals

NgRx Fundamentals

12 Lessons

Go hands-on with NgRx to efficiently manage state in Angular applications using Redux pattern.

What is NgRx?

Project Overview: Products Component

Introduction to the NgRx Store

Setting Up the Actions with Action Creators

Dispatching Actions

Setting Up the Initial States

Setting Up the Reducers

Setting Up the Store

Setting Up the Selectors

When to use and not to use NgRx

Summary: NgRx Fundamentals

Quiz: NgRx Fundamentals

Implementing NgRx Fundamentals

Project

Debugging NgRx

4 Lessons

Grasp the fundamentals of using DevTools for effective NgRx debugging and state inspection.

DevTools for Debugging NgRx

DevTools Demo

Summary: Debugging NgRx

Quiz: Debugging NgRx

NgRx with TypeScript

6 Lessons

Take a closer look at using TypeScript interfaces to ensure strong typing in Angular applications.

Introduction to Strongly Typed Code

Overview of Interfaces in TypeScript

Defining Interfaces

Strongly Typing the Code

Summary: NgRx with TypeScript

Quiz: NgRx with TypeScript

NgRx: Advanced Concepts

5 Lessons

Implement advanced NgRx by mastering lazy-loaded modules and selector composition for optimal state management.

Working with Lazy-Loaded Modules

Selector Composition

Demo: Selector Composition

Summary: NgRx — Advanced Concepts

Quiz: NgRx — Advanced Concepts

NgRx Effects

7 Lessons

Master side effects in Angular with NgRx Effects, enhancing maintainability and testability of applications.

Introduction to NgRx Effects

Isolating Side Effects from Components

Implementing the loadProductsAction Method

Implementing the getErrorAction Method

Defining NgRx Effects

Summary: NgRx Effects

Quiz: NgRx Effects

Build a Trello Clone in Angular using NgRx

Project

Unit Testing NgRx

8 Lessons

Try out unit testing NgRx reducers, selectors, and effects to ensure code functionality before deployment.

Introduction to Unit Testing

Testing Reducers

Testing Selectors

Testing Effects: Configuring the TestBed

Testing Effects: Testing the Success Case

Testing Effects: Testing the Error Case

Summary: Unit Testing NgRx

Quiz: Unit Testing NgRx

Implementing Shopping Cart Functionality

Project

Appendix

4 Lessons

Look at enhancing Angular state management with additional NgRx libraries and setup.

Additional NgRx Libraries

Setting Up the NgRx Store

Setting Up DevTools

Setting Up NgRx Effects

10.

Conclusion

1 Lessons

Examine essential NgRx features and unit testing for state management in Angular.

Concluding Remarks

E-Commerce Store With Stripe API Integration

Project

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

Syed Nazmus Sakib

Developed by MAANG Engineers

Every Educative resource is designed by our team of ex-MAANG software engineers and PhD computer science educators — subject matter experts who’ve shipped production code at scale and taught the theory behind it. The goal is to get you hands-on with the skills you need to stay ahead in today's constantly evolving tech landscape. No videos, no fluff — just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Software Developer

Carlos Matias La Borde

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Personalized Interview Prep

Skip the LeetCode grind with a custom roadmap that adapts to your goals. Hands-on practice for Coding Interviews, System Design, and more.

Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Course

A Hands-on Guide to Angular

Discover Angular's core concepts and advance to building a complete SPA. Gain hands-on experience by creating modules, components, forms, routing, and APIs in an e-commerce app.

16 h

intermediate

Course

Intermediate Redux with Redux Toolkit

Delve into Redux Toolkit to streamline Redux development with best practices. Gain insights into creating stores and reducers, and build TweetFind, a Twitter search app, for your portfolio.

6 h 15 m

intermediate

Course

Advanced TypeScript Masterclass

Discover advanced TypeScript concepts: Gain insights into compiler flags, generic types, and discriminated unions. Delve into writing error-free code and mastering complex error messages with confidence.

6 h

intermediate

Course

Learn TypeScript: The Complete Course for Beginners

Gain insights into TypeScript's core concepts, from basics to advanced type checking and iterators. Learn about static typing and JS library support through practical, hands-on experience.

12 h

beginner

Course

Learn Coding Basics in JavaScript

Gain insights into JavaScript basics, including syntax, conditional statements, arrays, functions, and DOM. Discover practical skills for entry-level web development and build interactive web experiences.

25 h

beginner

Course

React Deep Dive: From Beginner to Advanced

Gain insights into React from basics to advanced, explore its ecosystem, and delve into best practices and the latest straightforward methods for efficient use.

16 h 40 m

beginner

Course

A Hands-on Guide to Angular

intermediate

16 hour

Course

Intermediate Redux with Redux Toolkit

intermediate

6 hour 15 min

Course

Advanced TypeScript Masterclass