Plan Your Next Party with an Angular Invite App Using Akita!
AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!
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!
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.
Those are a lot of complex concepts, but at the end of the day 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.
Getting Started — The Model
The first thing we’ll need to do is think of what we want in the model of the entity we’ll create. It represents a person who’s invited to party, so we’ll need a name field, a unique ID field (generated automatically by Akita in the creator function we add), and a boolean indicating whether that person has RSVPed. We’ll also throw in a numerical field indicating how many additional guests that person will arrive with.
ViewPeople is another type we’ve added — it will be used in our query to describe the type of data we want to query from the store.
The Store
Next, we can use the Akita Schematics to create an entity store. The entities in this case will be the people we invite to the party.
As you can see, we don’t need to add much — all the boilerplate fuctions for handling the data are built-in as part of the Akita entity store. We’re only going to add a ui filter which will let us filter out invitees based on their status (all invitees/those who RSVPed/those who RSVPed and have additional guests arriving with them).
The People Service
Next, we’ll create a service in order to populate the store. It’ll call the built-in store method in order to add or remove people, and will also have method to alter their status once they’ve RSVPed or notified they’re bringing guests along.
The People Query
To get the stats on our party guests, we’ll create an entity query with a method that uses the rxjs method combineLatest() to give us all the stats we need — the number of people we invited, how many RSVPed, and how many people we should expect in total (attendees plus their guests).
GUI Components
Finally, it’s time to create some components to let us add or remove invitees and update their status.
In summary: The Akita entity store is a great place to start when you need to manage multiple entities and their states. A lot of the functionality you’ll need is built-in to the entity store and the entity query.
Here are some more articles about Akita:
Follow me on Medium to read more about Angular, Akita, and JS!
