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 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. addNewPizza() 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 interface that extends Akita’s interface and the . This is the state which will denote which pizza is currently active. PizzasState EntityState getInitialActiveState() 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 , the entity comes with a variety of selection functions, some returning entities, and some observables). The only method we need to add is , which will allow us to get an observable containing the toppings of the pizza that’s currently active. documentation selectPizzaToppings() 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: _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 💣 What’s New in Akita for Angular: We’ve Added Your Top Requested Features 🔥 _Every developer knows state management is difficult. Continuously keeping track of what has been updated, why, and…_netbasal.com 🚀 Introducing Akita: A New State Management Pattern for Angular Applications _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 👷 Building a Shopping Cart in Angular Using Akita _In this article, we’ll build an Angular application which lists movies which arrive from a nested API response. We’ll…_netbasal.com Working with Normalized Data in Akita and Angular _It’s only been two weeks since Akita’s initial announcement, and the response has been tremendous. We want to thank…_engineering.datorama.com 🚀 What’s New in Akita v1.1.0 🔥 _akita - 🚀 Simple and Effective State Management for Angular Applications_github.com datorama/akita * ok, at least by me and the Teenage Mutant Ninja Turtles. Follow me on Medium to read more about Angular, Akita, JS!

Too Long; Didn't Read

Making security fun one episode at a time

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

Too Long; Didn't Read

Inbal Sinai

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

Inbal Sinai

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES