DEV Community

loading...
Cover image for 664 Bytes reactivity

664 Bytes reactivity

betula profile image Slava Birch ・2 min read

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);
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:

Install

npm i reactive-box
Enter fullscreen mode Exit fullscreen mode

Thank you for your time!

See reactive-box repository on Github

Discussion

pic
Editor guide