What is Reactive State Management?

https://youtu.be/6swi_aDSqMQ

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:

@fireflysemantics/slice

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.