Akita — Do we have a new Gen State Management finally?

Like you, I have also sifted lots of articles before jumping onto Akita for my new project. I believe, state management is one thing where if you go wrong, then you might regret in the later stage because things get so tightly-coupled that it becomes a blocker to refactor your code. Please choose it wisely!

There are lots of compelling reasons (and lots of articles out there) why you should use Akita, but according to me below are some of the pointers which, according to me might entice you to give a TRY!!!

Pre-requisite: You must have some knowledge about other solutions to reap the benefits of Akita.

Simplicity

Though NGRX and NGXS state management libraries can do what you are trying to do with Akita, when it comes to boilerplate code, Akita is outstanding, because it does stand out of the crowd. If I tell you that whatever you want to achieve using those two libraries can be achieved by Akita with fewer lines of code, then wouldn’t you give a try to it? If your application is small then solutions like NGRX and NGXS can be overkill. But with Akita, no matter what size your application is, you can use it with ease without any performance issues.

Easy To Learn

When I started learning NGRX, it took me 3 days to go through all the blogs and videos available on the Internet to grasp the basic concepts of Redux and connect all dots: State, Action, Reducer, Effects, and Selector. I had to draw a map of all this to understand the flow. I still remember I was hooked to the screen and reading till 11 p.m. in the office when all my teammates had gone home.

Now, when it comes to Akita, it took me just 4 hours to get the basics of it and why it was created in the first place. Though it is built on top of RxJs and has borrowed concepts of multiple stores from Flux and immutable state from Redux, learning Akita is like feeling at home. If you are an OOPS guy and know a little bit (though not necessary) you will be able to digest Akita’s terminologies — store, query, and model — very easily. Even once you start implementing basic examples, you will get a feeling that why such a library didn’t exist before?

Also, it is not only you who will work on the project, just imagine a scenario where the application has grown to its extent and the new developer joins the team, how hard it would be for him/her to know what’s going on. The biggest problem of boilerplate code is that you miss the vital parts (like business logic) of the application. And the true cost of the product is not an initial investment, but maintenance cost.

Undo/Redo

A nice to have but a crucial feature, if you want to let users revert his/her actions. Akita maintains the history of all actions and it can replay when you need it. Utilizing this same concept, it has a plugin that you can use it to undo/redo actions.

Dev Tools

To monitor the changes in the states, you can install the Redux dev-tools extension in your browser. Akita provides integration with it and you don’t need to install anything else. However, it has a limitation of not supporting live skipping or dispatching actions because Akita is not powered by a Redux-like pattern.

Two Stores

In Akita, you have the choice to create two different types of stores: basic and entity. In basic store, you can save unstructured data (e.g. UI State) like a session, current UI theme, data table filters, browser zoom level, API call loader, etc. But if you need to store the whole set of structured objects (Domain State), you can go for an entity store. The entity store is similar to your table in the database. It maintains the id for each object and provides you with various functions as an update, delete, insert, etc. to manage the entities.

Multi-Platform Support

Initially, Akita was Angular oriented, but it was designed to be platform-agnostic from the beginning. So, no matter if you are an Angular or React developer, you can easily switch or migrate your projects and still have the same store with little to no changes in the code. Even if you find the articles written for Angular, you can just replace the component implementation in the code samples and you are good to go. No need to scratch your head ✨ Not only this, you can use Akita in Svelte, VueJS, Web Components, and Vanilla JavaScript as well.

Documentation

The success of any technology or framework depends upon many factors and one such factor is documentation. We always need authentic sources and good code examples to start the journey and Akita has proved itself in it. It maintains the documentation and also takes suggestions to improve it and to keep it up to date. I personally tried many samples from their documentation with Angular 10 and I didn’t observe any obsolete content.

Form Support

Have you ever created a multi-step form and tried to manage the controls’ values and validations? Believe me, it can be a nightmare if your second form depends upon the values of the first form. So, Akita can help you over here with its custom solution to synchronize the store and form controls, and then you can easily access the form values from anywhere in the application. You can also check the form’s different statuses like pristine, errors, valid, invalid, disabled, touched, etc.

Akita CLI

To save you from creating files manually, you can generate stores based on the specifications quickly using Akita’s CLI tool.

Library Downloads

Well, this is not the only measurement to decide whether to use this library or not, but I can say that the weekly downloads are increasing gradually and it indicates that developers are getting more and more attracted to it.

Summary

I don’t want you to take my words on Akita, but I would like to urge you to create two projects with the exact same functionality and try to implement both NGRX/NGXS and Akita. You will come to the conclusion with confidence. ✔✔ Don’t forget to tell me in the comments about your choice! 🙂