Home>Courses>Mastering State Management with Angular and NgRx

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.

Beginner

58 Lessons

15h

Certificate of Completion

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.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

2 Projects

47 Playgrounds

7 Quizzes

Course Overview

What You'll Learn

Course Content

Recommendations

Course Overview

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 experienc...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

Course Content

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

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

11.

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

12.

Conclusion

1 Lessons

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

Concluding Remarks

Course Author

Syed Nazmus Sakib

Trusted by 2.5 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."

Carlos Matias La Borde

Software Developer

"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

"I've tried probably 5-7 different sites and Educative is easily the best. It perfectly blends explanation with interactivity"

Eric Downs

Musician/Entrepeneur

Hands-on Learning Powered by AI

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

Instant 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.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

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!

Recommended before starting this course

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.

beginner

12 hours

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.

beginner

25 hours

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.

beginner

16 hours 40 mins

Course

Learn TypeScript: The Complete Course for Beginners

beginner

12 hour

Course

Learn Coding Basics in JavaScript

beginner

25 hour

Course

React Deep Dive: From Beginner to Advanced

beginner

16 hour 40 min

Related Courses and Skill Paths

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.

intermediate

16 hours

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.

intermediate

6 hours 15 mins

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.

intermediate

6 hours

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