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.