664 Bytes reactivity

Minimalistic, fast, and highly efficient reactivity.

Hi friends! Today I will tell you how I came to this.

Redux has so many different functions, Mobx has mutable objects by default, Angular so heavy, Vue so strange, and other them so young 😅

These funny thoughts served as fuel for writing the reaction core. So that everyone can make their own syntax for managing the state of the application in 100-150 lines 👍

It only three functions:

• box - is the container for an immutable value.
• sel - is the cached selector (or computed value in another terminology) who will mark for recalculating If some of read inside boxes or selectors changed.
• expr - is the expression who detects all boxes and selectors read inside and reacted If some of them changed.

import { box, sel, expr } import "reactive-box";

const [get, set] = box(0);
const [next] = sel(() => get() + 1);
const [run, stop] = expr(() => {
    console.log(`Counter: ${get()} (next value: ${next()})`)
});
run();
set(get() + 1);

Try on RunKit!

Basic examples:

• Counter with Node.js on RunKit
• Counter with React on CodeSandbox

It is minimal core for a big family of state managers' syntax. You can use the different syntax of your data flow on one big project, but the single core of your reactions provides the possibility for easy synchronization between them.

Examples of state managers' syntax:

• Simple store and actions and only hooks with React on CodeSandbox
• Simple model with React on CodeSandbox
• Mobx like todo-mvc with React on CodeSandbox

Install

npm i reactive-box

Thank you for your time!

See reactive-box repository on Github