Last updated on February 6th, 2023 at 01:59 pm.
When you start creating a new application, you should adhere to the basic postulates that the code you write is simple, easy to test, maintenance-friendly, and clear to colleagues you work with or will work on maintaining your application. Also, at the very beginning, you should ask yourself how complex the structure of your application is and how you will manage the data you have without your application being fast, user-friendly, and reliable.
When working on developing a more complex Angular application, data management can be very complex and demanding. Therefore, in the beginning, it is important to separate whether or not the application you are working on has a complex architecture and processes a large amount of data, for example, if it is an editor, any kind of real-time display of data such as results at sports matches, etc. In that case, it would be very wise to consider using one of the state management solutions, i.e. to find a solution that will help you manage the data you have.
What Is the State of the Application?
Practically, a state of the application is the memory of one application in which data received from the API call, from something entered by the user, and other sources are received. State management is a concept that practically separates your state from logic and user interface and also that there are no more copies of your data. One of the most popular forms of state management is REDUX which emphasizes reactive programming. With this form, you have a “single source of truth” and your application monitors that data.
When a change occurs, your application responds to that change as needed by a specific component. This way you practically save time for data synchronization and you have an application that is consistent and has fewer flaws. A specific example would be a list of recipes, a list of users in an application, or something similar. In case you didn’t know by now, Angular applications consist of multiple components and each of these components has its own state – and none of them is aware of what the other components have in their state.
FYI: With Angular, you cannot send an email message directly. It is a client-side framework, which means it works on the client. Server-side functionality is required for email sending. So, you probably have a backend that receives requests from your Angular app to deliver messages and email campaigns that range from loud and flashy to basic and understated, thanks to Benchmark.
In order to make the data from one component of the parent-child relationship available to another, and which are in the parent-child relationship, the @Input and @Output decorators are usually used. This approach is fine if you have a few components, such as two.
In addition, if you have a situation where multiple components use the same data set, create your own data exchange service. The overhead is small, and implementation is fairly simple. However, as the application grows, there will be a lot of components and more modules. And, in that case, the situation is much more complex, error-prone, and managing the State becomes quite difficult. In such cases, the complex application architecture of NGXS, NGRX, or Akita solutions is preferred to make it easier to manage the State.
For the example we chose: if there is a change in Component 3, it forwards the data to Component 1 and so on to Component 5, which monitors the changes.
NGXS, NGRX, or Akita – whatever you choose as a state management solution will transform the situation from the previous chart into something like this, so now the components will communicate directly with the store where the data will be stored. That is, in all applications where state management should be dealt with, you actually use state library management as a tool that gives you mechanisms on how to retrieve data from different places, combine it, and change that data.
Which State Management To Choose?
Now that we have determined that you need one of the state management solutions, the question is what to choose and where to start.
If we compare NGXS and NGRX, both are state management libraries that can use Angular applications. There are certain advantages of NGXS when working on the development of the Angular application and we want to point them out to you in the first place.
- “More is less” – NGXS strives for simplicity, to achieve as much as possible with as little code as possible, and to reduce the “boilerplate code” to a minimum. Of course, there is also a plugin for boilerplate code in NGRX (https://github.com/johnpapa/angular-ngrx-data), but we nonetheless believe that NGXS is the best option because it provides out-of-the-box functionality. The CQRS model (Command and Query Responsibility Segregation), which is used in libraries like Redux and NGRX, is used in NGXS, although the boilerplate minimizes this by leveraging current TypeScript methods like classes and decorators. Specifically, if we compare, the state.ts file in NGXS changes three files in NGRX (reducer.ts, effect.ts, selector.ts). We believe that this definition will create a wrong image for many who have already used NGRX and will think that they will transfer all the code from all three files to one, which would not be good and would not be clear. Also, the creation of the action itself and the code contained in the component is minimized.
- DI (Dependency Injection) – It is one of the basic features of Angular, and NGXS allows you to use it. In addition, as it is developed by a group of Angular developers, the Angular approach is very present; classes, decorators, TypeScript features, and the like are used.
- Promise – In addition to the fact that the action method can return Observable to you, it can also return Promise.
- Actions in NGXS are asynchronous, which allows them to have a life cycle. So, after one action or set of actions is completed, you have the choice to perform whatever is different. This is accomplished fairly simply in NGXS.
What Is NGXS and How Does It Work?
As we have already mentioned, NGXS is a state management library and is very similar to NGRX, with the difference that it has less boilerplate code and is easier to learn.
There are 4 basic concepts in NGXS that you should understand before you integrate them into your project.
- Store: Store is actually a key element in the whole state management process. The store facilitates the interaction between components and the state. Through DI, you can practically get a store reference, and later you can use it to send actions and stores via the store.dispatch() method, which will then trigger a state modification, or download state applications via selector.
- Actions: Actions are instructions through which you send a notification to the store that something has happened in the application. Each action contains a type that is its unique identifier, and may optionally have payload metadata that can be read by any action handler.
- State: In the context of NGXS, states are the classes that define the state container. These classes store different parts of the entire state of the application. Let’s take the example that an application consists of 3 modules, X, Y, and Z – each of these three modules will manage one part of the total state of the application. Thus, the information from the X module will always be maintained in the X part of the state.
- Selectors: Selectors are functions that practically separate one part of the global state container. In NGXS, you can use the select function or the @Select decorator. You will often use the same selectors in several different places, or you will have complex selectors that you want to keep separate from your component. NGXS has a @Selector decorator to help us with that. This decorator will memorize the performance function, as well as automatically cut the part of the state you are dealing with.
If you are developing an enterprise Angular application that has a lot of data to work with, our advice is to use some of the state management options you have available. We are not saying that NGRX or Akita are bad solutions, moreover they are good solutions. In our opinion, NGXS is simpler, made for Angular applications and for those who have not yet had experience with other solutions, and we think it is best to start with NGXS because:
- It simplifies state or data management.
- It uses decorators, classes, and DI.
- It provides “Applications Intelligence to live” location.
For more information on NGXS itself, you can check out the official documentation and also watch Mark Whitfeld’s YouTube videos – he is the team leader in the core team for NGXS library development.
You can see many projects on GitHub, one of which was just developed by Mark Whitfeld, and the examples we have given above are from this project. Also, here you can see how selectors can be useful and how to use them wisely.