What is Reactive State Management?

Reactive State is state that updates continuously in response to specific events and is Observable.

Lets develop a real world Typescript Stackblitz example using the Firefly Semantic Reactive Entity Store. We also have this on youtube in case you’d like to follow along there:

If doing this from scratch make sure to add Firefly Semantics Slice to the dependencies of the Stackblitz:

The entity store will be populated with Todo instances:

interface Todo {gid?: string;id?: string;complete: boolean;title: string;}

Each time we add a new Todo to the store, the store will respond reactively by updating the count observable tied to it.

The function used to observe the count updates looks like this:

function countSubscription(c) {
console.log(`The current Todo count is ${c}`);
}

And we observe the stores count Observable like this:

todoStore.count().subscribe(
(c) => console.log(`Observed count of Todo entities ${c}`)
);

The Todo instances we will be adding are as follows:

const TODO1: Todo = {
id: TODO_ID_1,
complete: false,
title: 'You complete me!',
};
const TODO2: Todo = {
id: TODO_ID_2,
complete: true,
title: 'You completed me!',
};

Each time a Todo is added the count will update and we will see a logging notification. Initially this will be logged:

Todo entity count: 0

That logging statement is triggered when the our countSubscription() function is subscribed to the count Observable .

Lets add the first Todo :

todoStore.post(TODO1);

We now see that Todo entity count: 1is logged.

Lets add the second one:

todoStore.post(TODO2);

We now see that Todo entity count: 2is logged.

We can imagine this being used in for example a shopping cart where we want to update and display the number of items in the cart reactively as they are added.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation