Building SPAs, we sometimes come across the need to display data using the technique of infinite scrolling — i.e., continuously loading data as the user scrolls down the page. In this article, we’ll see how Akita can help you manage your loaded data.

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.

Getting Started

In this example, we’ll implement an Akita entity store which will hold tweets. First, we need a model describing the information in a tweet: username, text, and an id.

The Tweets Store

Next, we’ll create the tweet store by extending the entity store. Since the functionality for managing the entities is built into the Akita store, we don’t have to add much.

Note that in addition to the tweet entities, the store root holds a state which contains two attributes: page — denoting up to which page of tweets the store holds, and hasMore — a boolean indicating whether there are additional pages to be fetched from the server. The convention in the server mockup here is that a page contains ten tweets. This is set up so we don’t fetch one tweet at a time; Each tweet doesn’t take a lot of room on the page, and scrolling down often means we want to show several more.

The Tweets Service

As with all cases of Akita stores, populating it is the responsibility of a dedicated service.

In this instance, we simulate an asynchronous call to a server in the getTweets() method, which returns the tweets for that page. The result is then added to the store via the updateTweets() method, which uses the transaction decorator to ensure that only after it’s completion subscribers to the store receive the updated data (for more on transactions in Akita see the documentation).

The Tweets Query

To query the data in the store we created, we create a query class extending the Akita QueryEntity .

Its parent already comes with built-in methods for querying the tweet entities themselves, so all we need to add are methods to get the individual fields in the store’s root. Both utilize the parent class’s getSnapshot() method, which returns the raw value of the store.

The Tweets Component

Now we can create a component which uses the service to gradually populate the store based on the user’s interaction with the page — as the user scrolls down more tweets are fetched by the service and added to the store, until we get an indication from the server that no more tweet pages are available. The entity query methods supply us with observables — one for the store entities and one indicating the store’s loading status.

But Wait, There’s More!

Akita is a very robust tool which 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. I’ve added at the end of this article links to other articles which explore some of its other capabilities. Among those is the ability to run inside a web worker, which can come in handy in cases like these. For more on that, please see the documentation.

In summary: The Akita Store can provide you with a quick and easy way to implement infinite scrolling, which comes with built-in functionality that’s often needed when carrying out this technique. Neat.

Here are some more articles about Akita:

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