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:

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.

--

--

--

Founder of Firefly Semantics Corporation

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A basic tutorial on how to set up Speech Recognition with React

A Blazor WebServer Application with ASP.NET

How JavaScript conquered the web? Part-2

‘For/Await/Of’ Loops: A Beautiful ES9+ feature

Stored Proc Error Logging: Unload to Stage

Experience with neogcamp levelZero

neoG Camp

JavaScript libraries for “Self typing text”

How to optimize response time in node/express app with server-side cache

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

More from Medium

Indexing Typescript Todo Entities with Lunr

Custom Type Guards

STATE MANAGEMENT : REDUX

Rich Enums in Typescript?