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.
Our entity to manage will be a list of users. We’ll start by defining a model for a user:
Next, we’ll generate an Akita entity store via Akita Schematics
, and name it
. Behind the scenes, Akita provides us with all the functionality we need for entity management, so no additional methods are required.
To populate our store, we’ll create a
. It will also determine which entity currently has the active state (also defined in the store), and update its values.
The last piece of the puzzle is the entity query, in this case it’s the
. 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:
Akita and Firebase — a Match Made in Angular Heaven
So you’re a big fan of Firebase, but you also want to start working with Akita (or vise versa). How do the two play… netbasal.com
Plan Your Next Party with an Angular Invite App Using Akita!
So, you’re planning a party, and you want to write a small app to help you manage all the invites. Akita to the rescue! blog.angularindepth.com
Infinite Scroll in Angular Using Akita
Building SPAs, we sometimes come across the need to display data using the technique of infinite scrolling — i.e… netbasal.com
Let’s Build a Pizza Store with Akita — State Management for Angular Applications
What is Akita? hackernoon.com
The Complete Guide to Authentication in Angular with Akita
Authentication is an essential part of most web applications. These days, the most common way single-page applications… engineering.datorama.com
Follow me on Medium to read more about Angular, Akita, JS!