State Management and NgRx

In this chapter, we’re going to be exploring two aspects of Angular development. While very important, they are not parts of everyday Angular development, but they are worth looking into if we want to build larger-scale applications with Angular. These two aspects of enterprise-level Angular application development are state management and NgRx.

Problems of complex Angular applications

As we build more and more complex business applications using Angular, we eventually run into issues, such as:

• how to manage all the interaction between components
• how to persist data between sections of the application
• how to make one part of our application access data from another
• how changing from one part of the app affects another.

All of these problems come under the responsibility of state management.

How can we manage the state?

Luckily for us, as Angular developers, there are a few options regarding how we can manage state. We could roll our own solution using RxJs, or we could make use of local storage and a service layer to store data (but this isn’t a good approach).

Thankfully, some very smart people in the Angular community have come up with approaches to solving this problem. There are many frameworks available for us that help manage state in Angular, such as NgXs, Akita, and NgRx.

Why choose NgRx?

The reason we’re looking at NgRx in this course, instead of other state management libraries, is that NgRx is used in some large enterprise-level applications. Therefore, by learning NgRx, you’ll be able to take what you’ve learned from this course and put that knowledge to work on larger applications. This will lead your career as an Angular developer, and you will be able to work on these large enterprise-level applications that Angular specializes in.

After you have read this chapter and learned about what state management is, it may be worth looking at the other solutions.

In this chapter, we will learn about the following topics:

• The problems we face and why state management is the answer
• Why state management is important in modern web applications
• What NgRx is and why you should consider using it
• How NgRx helps implement a solution for adding state management to an Angular application
• What the Redux pattern is
• How to add NgRx to an application
• How to use the features of NgRx to manage the state of an Angular application

State management and NgRx are both large topics that could each fill a course on their own, so we will just go through the basics and become familiar with both.

📝 Note: Press the RUN button to compile and serve the application. Once the app compiles, you can see its output in the Output tab or by clicking on the URL given after Your app can be found at.