What is state management in angular? and why should I use it?

Question

I am new to Angular and this question might be very broad. But I am interested in learning more on State management usage. Recently one of our project implemented state management using NGXS library. However I am trying to understand what are all the advantages it brought to application?

The implementation is very deep and on high level, there are some actions which carry application data (as set by user) and listeners to those actions which process the request and dispatches to next step as required. How this is different in terms of application usage or performance etc., from general angular application. I am at beginning stage of understanding state management and so I feel like I am writing so much of code which mayn't be really required. example - just to route to another page, i had to implement a state modal to hold the object and declare an action and a listener to implement that action.

I am going over several documentations and getting details on how state management can be implemented but not getting the right answer for why state management should be implemented.

Thank you in advance!

Crunode

I suggest you review the NGXS site: ngxs.io and the definition of CQRS: martinfowler.com/bliki/CQRS.html. – Oaf

This blog post covers all the information you need: Angular Application State Management: You Do (Not) Need External Data Stores – Barnebas

Answer 1

First, to answer your question, you should know that State Management is not a term of Angular, and you don't have to use it. State Management is a term that defines a way we can store data, modify it, and react to its changes. In our case, the libraries NGRX and NGXS are using a pattern called CQRS (Command Query Responsibility Segregation) principle, and I quote Wikipedia:

It states that every method should either be a command that performs an action, or a query that returns data to the caller, but not both.

State Management acts as a single source of truth for your application.

You can build an app without complex State Management. You can use only services, and you're good to go. Adding a State Management library (e.g NGRX/NGXS) to your application would add some complexity and boilerplate, but then you'll have the benefits of (quoted from https://mcmap.net/q/242052/-when-to-use-the-cqrs-design-pattern):

1. Large team - You can split development tasks between people easily if you have chosen CQRS architecture. Your top people can work on domain logic leaving regular stuff to less skilled developers. 2. Difficult business logic - CQRS forces you to avoid mixing domain logic and infrastructural operations. 3. Scalability matters - With CQRS you can achieve great read and write performance, command handling can be scaled out on multiple nodes and as queries are read-only operations they can be optimized to do fast read operations.

The most popular Angular's State Management libraries are NGRX and NGXS.

I won't elaborate on NGRX, but in short - it has proven itself in real production applications.

However, NGXS is a younger state management library for angular that adopted some ideas of NGRX and "empowered" it by using the tools that Angular provides (such as DI). The main difference between NGRX and NGXS is that your boilerplate is significantly less on NGXS. If you're interested, you can read the main reason Why another state management for Angular.

So to sum it up - If you're planning on building a large scaled application, then you should consider using State Management, although - you don't have to.

Trait

Great! Thank you so much @Eliya especially for introducing me CQRS principle. – Crunode

That's a very nice answer. A complete summary (Y) ty – Nazarite

Here is a very cool summary of the most popular state management tools: ordina-jworks.github.io/angular/2018/10/08/… – Toehold

still doesn't answer "why state management should be implemented" – Sensate

can we use a single js file as state management instead of using 3rd part library? – Fascist

Answer 2

Disclaimer: I'm the author of the library

ng-simple-state

Simple state management in Angular with only Services and RxJS.

• See the stackblitz demo.
• See the source code.

You can sharing state between components as simple as possible and leverage the good parts of component state and Angular's dependency injection system.

Biased