Multiparadigm state manager for React by ~2 kB.

Realar multiparadigm state manager for React based on reactive mathematic.

Light, Fast, and Pretty looked 😘

Targeted to clean code, modulable architecture, and time of delivery user experience.

Supported two kinds of data and logic definitions.

• Plain functional reactive programming with only functions

const [getCount, set] = box(0);

const tick = () => set(getCount() + 1);
setInterval(tick, 200);

const App = () => {
  const count = useValue(getCount);
  return (
    <p>{count}</p>
  )
}

Try on CodeSandbox

• And transparent functional reactive programming with classes, decorators and jsx wrapper

class Ticker {
  @prop count = 0
  tick = () => ++this.count;
}

const ticker = new Ticker();
setInterval(ticker.tick, 200);

const App = () => (
  <p>{ticker.count}</p>
)

Try wrapped version on CodeSandbox

Realar targeted to all scale applications up to complex enterprise solutions on microfrontends architecture.

You can use as many from Realar as you want. For small websites or theme switchers, two functions are enough👌 Step by step on applications scale stairs you can take more and more. From sharing state to all application parts, to modulable architecture with apps composition.

I made my choice!

Comments

[Ben Halpern]

So I better understand what I'm looking at: What is a "Multiparadigm state manager" in the abstract?

[Slava Birch]

The abstraction of the core is an implementation of functional reactive programming on javascript and binding that with React.

It uses usual mathematic to describe dependencies and commutation between reactive values.

In contradistinction to stream pattern, operator functions not needed. The reactive “sum” operator used a simple “+” operator (for example).

const [getA, setA] = box(0)
const [getB, setB] = box(0)

const sum = () => getA() + getB()

on(sum, console.log)

That code has a graph of dependencies inside. “sum” - reactive expression depends from “A” and “B”, and will react if “A” or “B” changed. It is perfectly demonstrated with “on” function (that subscribes to reactive expression) and “console.log” (developer console output).

On each change of “A” or “B” a new value of that sum will appear in the developer console output.

And for tasty easy binding reactive expressions and values with React components.

const App = () => <p>{useValue(sum)}</p>

That component will be updated every time when new sum value is coming.

The difference from exists an implementation of functional reactive programming (mobx) in Realar dependency collector provides the possibility to write in selectors and nested writable reactions.

Realar provides big possibility abstractions for reactive flow. We already know about reactive value container, reactive expressions, and subscribe mechanism. But also have synchronization between data, cycled reactions, cached selectors, and transactions.

Below I will talk about high level abstractions provided from Realar out of the box.

• Shared instances decomposition. The pattern for decomposing applications logic to separate independent or one direction dependent modules. Each module can have its own set of reactive values. (ssr, comfort “mock” mechanism for simple unit testing)

• Actions are a necessary part of reactive communication, well knows for most javascript developers. Possibility for subscribing to action, call action, and wait for the next action value everywhere on the code base.

• React components context level scopes. Declaration one scope and use as many reactive value containers as you want no need to define a new React context for each changeable value.

• Decorators for clasess lovers. And babel plugin for automatic wrap all arrow functions defined in the global scope with JSX inside to observe wrapper for the total implementation of transparent functional reactive programming (TFRP) in javascript with React.

This is a set of Realar abstractions on current time that I can describe.

I hope my answer was complete, if I understood the question correctly, thanks for your interest!

[Ben Halpern]

Awesome

[Slava Birch]

And thanks so much for your question!
I added this abstractions explanation to the project readme.
For better understanding for future users 😊