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.

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:

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: 1 is logged.

Lets add the second one:

todoStore.post(TODO2);

We now see that Todo entity count: 2 is 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.

What is Reactive State Management | Concept