Caught in the hell of state management (Angular)

Written by Leutrim Kosumi (Software Developer at ABC TECH Group)

One of the most important things in web development is state management. All front-end frameworks or libraries that have been introduced until now have one thing in common: they all aim to keep the user interface elements in sync with the state. In Angular, this can be achieved in various approaches and each one of them has its own pros and cons.

What are the options?

Hierarchical component’s interaction — includes the use of stateful and stateless components via @Input bindings and @Output custom events. The main concept is having a “stateful” parent component that delegates down into a “stateless” children component.
Pros: Explicit, predictable, simple to test.
Cons: Handy only within very simple applications

Observable data services — using angular services with RxJS library. This approach provides more flexibility in developing the application and managing the application’s state by using multiple Angular services. The Observable store pattern is a great solution for simple applications instead of a third-party library store. You must be well versed within the RxJS library and Observable Pattern. You should know what the “cold”, “warm”, and “hot” Observable patterns are, what’s the difference between them, how to transform one to another, which one of them to use, and lastly when to use them.
Pros: Fast, simple (if you know RxJS)
Cons: Combining different separate States, sequential requests, and catching/processing errors.

Redux Pattern with RxJS — redux is “a predictable state container for Javascript apps”. When using Redux, data moves in one direction only and that’s why data flow is explicit and predictable.

Some good to know definitions before going into packages:
- Action — dispatches the change in state that is to be made
- Reducer — a pure function, that doesn’t produce side effects and has access to the current state
- Selector — defines which data to get from the store
- Effect — handles everything that is asynchronous or outside the application

With the Redux methodology, we are separating the business logic from rendering, which allows the testing of two parts independently.

Let’s explore some of the libraries that apply this methodology.

NGRX — is powered by RxJS. It requires a lot of boilerplates. When using NgRx we can manage global and local states while isolating side effects, entity collection management and provides developer tools for a better developer experience.

NGXS — is modeled after the CQRS like in Redux. It reduces the boilerplate by providing strong typing, using modern TypeScript features (such as decorators and classes). NGXS includes store as global state container, action dispatcher and selector, actions as a class describing the action to take and its associated metadata, state as a class definition of the state, and selects as state slice selectors.

Angular-redux — provides Angular bindings for Redux which helps to integrate our Redux store into our Angular applications. It fills the gap with some of Angular’s advanced features, including a change detector. Also, it compiles time optimization (AOT) and processing with RxJS.

Features, tools, and community

● Features

- Selectors — functions or decorators that return a part of the store

▪ NGRX — contains optimized functions for selections. If you call a function with the same arguments, it can return the last result.

▪ NGXS — gives you two options to read the store. You can call the select function on the store or use select decorator @Select. You can use @Selector for a more complex function, but you need to do it in a class responsible for a given part of the state, not in a component. Once you create it, you can pass your @Selector functions into @Select decorator to use it in a component.

▪ Angular-redux — here we also have @Select decorator and the select function. You can pass a string, an array of strings, or a function as a parameter, if you leave it empty the selector will try to match a part of the store using a property name.

- Async Actions — reduces a state asynchronously

▪ NGRX — handles async actions with @ngrx/effects. They can react to emitted actions and any Observable.

▪ NGXS — allows actions to be handled asynchronously out-of-the-box. These async functions can dispatch different actions and modify the state directly. One important thing is that they must return an Observable or Promise to notify the dispatcher that the action has been completed.

▪ Angular-redux — just like NGRX dispatches actions synchronously by default and that’s why we need a separate package to handle async actions. We can use redux-observable, redux-thunk, or redux-saga.

- Meta reducers — pre-process actions before normal reducers are called. It’s a higher-order reducer that returns another reducer.

▪ NGRX — we can compose an array of meta reducers in the configuration option for StoreModule. They work similarly to Redux middlewares.

▪ NGXS — can be implemented using NGXS plugins. Plugins can manage the state because they have access to the state and they can handle actions.

▪ Angular-redux — when we create the reducer we create it as a higher-order function that returns another reducer and we can use that as a meta reducer.

These libraries offer way more features than the listed above which I will try to summarize in the table below:

*With addon or another package

● Dev tools

o NGRX — provides a special package for DevTools called @ngrx/store-dev tools. Displays the state of the store and the latest actions. You can skip actions, dispatch actions directly from the DevTools, but it does not verify that action’s payload.

o NGXS — same as NGXS provides a package @ngxs/dev tools-plugin, but it does not support all functionalities. You can view the latest actions, their impact, and the resulting state. You can jump to specific actions, but you cannot skip or dispatch them.

o Angular-redux — you can use DevToolsExtension which is an Angular binding for redux-dev tools-extension.

● Community

Based on NPM statistics, stars on GitHub, and other factors NGRX is the most popular state management package in Angular. But without any problem, you can find information and documentation for the other packages as well. The good thing about angular-redux is that you can use the knowledge and the community of Redux.

Conclusion

Which one to choose? Well, it depends of course. If you got a small application, then Angular services might do the work, but if you have a more complex application then maybe choosing from one of the packages is better, but before you choose keep in mind that:

● NGRX — quite difficult and complex. You need to write a lot of boilerplate.

● NGXS — simpler than NGRX and a lot of things are covered from the package.

● Angular-redux — definitely the simplest one. Use this one if you feel more confident with Redux than RxJS.