DEV Community

Cover image for 664 Bytes reactivity
Slava Birch
Slava Birch

Posted on

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()})`)
set(get() + 1);
Enter fullscreen mode Exit fullscreen mode

Try on RunKit!

Basic examples:

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:


npm i reactive-box
Enter fullscreen mode Exit fullscreen mode

Thank you for your time!

See reactive-box repository on Github

Top comments (0)