In the process of building web applications, we often need to manage basic CRUD operations for entities with a shared structure. This can result in a lot of boilerplate code unless we employ tools which offer built-in support for this functionality.

This is where Akita comes in. It’s a state management pattern, built on top of RxJS, which takes the idea of multiple data stores from Flux and the immutable updates from Redux, along with the concept of streaming data, to create the Observable Data Store model. In this article, we’ll learn how to perform active entity management using Akita, with all the necessary functionality that entails.

The Model

Our entity to manage will be a list of users. We’ll start by defining a model for a user:

The Store

Next, we’ll generate an Akita entity store via Akita Schematics, and name it users . Behind the scenes, Akita provides us with all the functionality we need for entity management, so no additional methods are required.

The Service

To populate our store, we’ll create a UsersService . It will also determine which entity currently has the active state (also defined in the store), and update its values.

The Query

The last piece of the puzzle is the entity query, in this case it’s the UsersQuery . It will be used to query data from the store. As in the case of the store itself, all the required functionality the query needs, it gets from its parent class, including querying all the store’s entities, as well as the active entity.

Putting It All Together

Finally, we’ll create a component which uses both the service and the query to manage the entities (in this basic example the component can display the entities and edit them, but we could easily use the service in conjunction with the built-in store methods to create and delete entities as well).

In summary: Akita lets you manage CRUD operations on your entities with little to no additional boilerplate code, saving you time and making your code more readable and maintainable.

Here are some more articles about Akita:

Follow me on Medium to read more about Angular, Akita, JS!