Components of Reactivity

Reactivity can significantly reduce the complexity of implementing reliable programs. So let's look at what we need to implement it..

📦 States
🎬 Actions
💨 Reactions
💫 Invariants
🌉 Cascade
🧙‍♂️ Runtime

📦 States

First of all, we need states - containers that store some values.

🎬 Actions

States themselves are useless until we can interact with them. So we need actions to change them.

💨 Reactions

But changing states without the ability to see them also makes no sense. Therefore, we need reactions - some procedures that are launched when the state changes and produce side effects.

💫 Invariants

If a side effect of the reaction is the update of another state, then we get invariant - a relationship between states that remains unchanged for any changes in these states.

An invariant can be expressed explicitly, such as a formula in a spreadsheet. So it can be assembled in code from other abstractions. For example, as a combination of an event handler, a transformation stream and a side effect. Or, for example, a template that forms the DOM from the parameters of a component.

🌉 Cascade

The beauty of invariants is that we can tie all application states into a single graph.

Thus, a change in one state will cascade be reflected throughout the entire application automatically. That is, we got that same reactivity.

🧙 Runtime

And for reactivity to finally work, we need some runtime that will track changes in some states and update the values of others in accordance with the invariants we have specified.

If you don't understand how it works, then reactivity will look like magic to you. But once you figure it out, it becomes another technology in your arsenal.