The Store is a single object which contains the store state and serves as the “single source of truth.”

The Query is responsible for querying the store. It acts as a middleware between components and the store, leaving the components independent of the data source.

Akita recommends using a service rather than calling the store methods directly by a component.

Building Shopika — Akita’s Shopping List

Shopika lets users create and edit shopping lists, along with the ability to mark each item on the list as bought.

Our application will feature three views: adding a list, displaying all the lists, and editing a list.

Time to code

Akita supports two types of store, a basic one which can hold any form of data, and an entity store which is meant to keep a collection of entities.

In our case, we’ll use an entity store, as we need to maintain a collection of list items.

Creating the Model

We create a model, where we define an interface for our list, which contains items.

Creating the Store

We start by defining our store interface by extending Akita’s EntityState interface and the ActiveState interface because we need to keep track of the active entity.

If you’re curious, here’s how EntityState interface looks:

EntityState Interface

Creating The Query

The query is our middleware between the store and our component. It extends the QueryEntity which will offer us the API our component needs to consume the data.

Creating The Service

The service is responsible for updating akita’s store using its built-in API.

We are using Akita’s built-in methods for adding a list, mark list as active and removing a list.

Akita provides helpers functions for efficiently updating arrays while preserving immutability. For instance, to update a list, we use the update() method which updates the current item in the list.

Creating the List component

To retrieve all the list our store holds, we call the getAll() method from the query’s API. Notice that you can also get the data as observable by calling selectAll() instead of getAll() .

Creating the EditComponent

Since we call setActive() when selecting a list, Akita knows what the current active entity is, and we can get it by calling the built-in getActive() query method.

Creating the AddList Component

The addList() method from the service will add the list to the store.

That’s all. You can visualize the whole app here:

Summary

Akita is a powerful yet simple tool for data management. It doesn’t require heavy boilerplate, and the learning curve is not steep compared to other existing solutions.

Akita doesn’t lack any feature compared to the competition (including DevTools), it’s matured and stable. I would strongly advise you to have a look at it.

⭐️ New Meetup in Tel-Aviv

We’ll be hosting a meet-up entitled “Kickass Angular” where we’ll be showcasing the cutting edge technologies we use/have come up with. Signup and reserve a seat! 👇🏻

In the meantime, here are a few resources about Akita: