Let’s Build a Pizza Store with Akita — State Management for Angular Applications

pictured: research 😋

What is Akita?

Akita is 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 Stores model.

Akita encourages simplicity. It saves you the hassle of creating boilerplate code and offers powerful tools with a moderate learning curve, suitable for both experienced and inexperienced developers alike.

Among its many capabilities, Akita lets you manage multiple entities while maintaining a single entity with an active state, as an indication of the entity we’re currently dealing with.

In this article, we’ll learn how to use this functionality, and what better way to do that than to create a page that deals with the best of all dishes, beloved by the world*, pizza.

The Pizza Store

We start by creating our model and entity store. It will hold entities which in this case represent pizzas — each with an id and a list of toppings (in this ideal world all the pizzas are family-sized).

Here is the representation of the pizza:

Next, we’ll create an Akita entity store to manage the pizzas. Note that almost all of the methods required to manage the store are already built-in. To create it you can use the accompanying CLI:

In addition to the basic entity store, it contains the addNewPizza() method. It creates a new pizza, adds it, and sets it as active. Since this requires more than one store action, we optimize the method by adding Akita’s transaction decorator — it ensures that anybody subscribed to the store’s value will only be triggered once.

Another added method in the store is a topic toggling function, which allows us to add or remove a selected topping. We also add an interface that extends Akita’s EntityState interface. This will denote which pizza entity we’re currently “editing” (i.e., adding or removing toppings from).

We also add the PizzasState interface that extends Akita’s EntityState interface and the getInitialActiveState(). This is the state which will denote which pizza is currently active.

To communicate with the store, we use a service and a query:

The Pizza Query

The query extends Akita’s built-in query, which is used to get entities from the store (as noted Akita’s documentation, the entity comes with a variety of selection functions, some returning entities, and some observables). The only method we need to add is selectPizzaToppings(), which will allow us to get an observable containing the toppings of the pizza that’s currently active.

The Pizza Service

The service allows us to modify the store’s contents as well as access it’s topping function. In applications where data arrives from an external source, the service would also be in charge of calling a data service and passing on its response to the store.

The Pizza Component

Finally, we use the query and the service in a component which displays the store content on the page, as well as controls to add pizzas and edit the toppings for the active pizza:

In summary: Through Akita we can not only store entities, but also manage them more efficiently, since it also comes with built-in support for managing an active state. No more adding toppings to the wrong pizza 🍕

Here are some more articles about Akita:

💣 What’s New in Akita for Angular: We’ve Added Your Top Requested Features 🔥_It’s only been three weeks since Akita’s latest release and we’ve already come up with hot new features ! (v1.2.0)_engineering.datorama.com

🚀 Introducing Akita: A New State Management Pattern for Angular Applications_Every developer knows state management is difficult. Continuously keeping track of what has been updated, why, and…_netbasal.com

👷 Building a Shopping Cart in Angular Using Akita_This is the second part of the introduction to Akita (the first part can be found here). In this part, we’ll create…_engineering.datorama.com

Working with Normalized Data in Akita and Angular_In this article, we’ll build an Angular application which lists movies which arrive from a nested API response. We’ll…_netbasal.com

🚀 What’s New in Akita v1.1.0 🔥_It’s only been two weeks since Akita’s initial announcement, and the response has been tremendous. We want to thank…_engineering.datorama.com

datorama/akita_akita - 🚀 Simple and Effective State Management for Angular Applications_github.com

* ok, at least by me and the Teenage Mutant Ninja Turtles.

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