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

This course includes

2 Projects

47 Playgrounds

7 Quizzes

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

What You'll Learn

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

Course Content

Getting Started

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

Course Introduction Course Project: Online Bookstore

Redux Fundamentals

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

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

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

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.

NgRx Effects

7 Lessons

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

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.

Implementing Shopping Cart Functionality

Project

Appendix

4 Lessons

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

10.

Conclusion

1 Lesson

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

E-Commerce Store With Stripe API Integration

Project

Course Author

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Anthony Walker

@_webarchitect_

Emma Bostian 🐞

@EmmaBostian

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!