realar

Realar

Reactive state manager for React based on reactive-box.

Light, Fast, and Pretty looked :kissing_heart:

Realar targeted to clean code, minimal abstraction, minimal additional functions, modulable architecture, and time of delivery user experience.

Realar supported two kinds of data and logic definitions.

If you don't have an interest in classes or decorators, you can code in pure style with a wide and full feature API.

But if you like, it looks likes very clear and natively, and you can start development knows only two functions.

Classes usage

prop. Reactive value marker. Each reactive value has an immutable state. If the immutable state will update, all React components that depend on It will refresh.

shared. One of the primary reasons for using state manager in your application is a shared state accessing, and using shared logic between scattered React components and any place of your code.

import React from 'react';
import { prop, shared } from 'realar';

class Counter {
  @prop value = 0;

  inc = () => this.value += 1;
  dec = () => this.value -= 1;
}

const sharedCounter = () => shared(Counter);

const Count = () => {
  const { value } = sharedCounter();
  return <p>{value}</p>;
};

const Buttons = () => {
  const { inc, dec } = sharedCounter();
  return (
    <>
      <button onClick={inc}>+</button>
      <button onClick={dec}>-</button>
    </>
  );
};

const App = () => (
  <>
    <Count />
    <Buttons />
    <Count />
    <Buttons />
  </>
);

export default App;

For best possibilities use realar babel plugin, your code will be so beautiful to look like.

But otherwise necessary to wrap all React function components that use reactive values inside to observe wrapper. Try wrapped version on CodeSandbox.

Pure usage

import React from "react";
import { box, useValue } from "realar";

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

const next = () => get() + 1;
const inc = () => set(next());
const dec = () => set(get() - 1);

const Current = () => {
  const value = useValue(get);
  return <p>current: {value}</p>;
};

const Next = () => {
  const value = useValue(next);
  return <p>next: {value}</p>;
};

const App = () => (
  <>
    <Current />
    <Next />

    <button onClick={inc}>+</button>
    <button onClick={dec}>-</button>
  </>
);

export default App;

Try on CodeSandbox.

Documentation

box

The first abstraction of Realar is reactive container - box. The box is a place where your store some data as an immutable struct. When you change box value (rewrite to a new immutable struct) all who depend on It will be updated synchronously.

For create new box we need box function from realar, and initial value that will store in reactive container. The call of box function returns array of two functions.

• The first is value getter.
• The second one is necessary for save new value to reactive container.

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

set(get() + 1);

console.log(get()); // 1

Edit on RunKit

In that example

• for a first we created box container for number with initial zero;
• After that, we got the box value, and set to box its value plus one;
• Let's print the result to the developer console, that will is one.

We learned how to create a box, set, and get its value.

on

The next basic abstraction is expression. Expression is a function that read reactive boxes or selectors. It can return value and write reactive boxes inside.

We can subscribe to change any reactive expression using on function.

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

const next = () => get() + 1;

on(next, (val, prev) => console.log(val, prev));

set(5); // We will see 6 and 1 in developer console output, It are new and previous value

Edit on RunKit

In that example expression is next function, because It get box value and return that plus one.

cycle

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

cycle(() => {
  console.log(get() + 1);
});

set(1);
set(2);

// In output of developer console will be 2, 3 and 4.

• Takes a function as reactive expression.
• After each run: subscribe to all reactive boxes accessed while running
• Re-run on data changes

Documentation not ready yet for on, action, sel, shared, sync, cycle, effect, initial, mock, unmock, free, useLocal, useValue, useShared, observe, transaction, cache functions. It's coming soon.

Demos

• Hello - shared state demonstration.
• Todos - todomvc implementation.
• Jest - unit test example.

Installation

npm install realar
# or
yarn add realar

And (if you like OOP) update your babel config for support decorators and using babel plugin for automatic observation arrow function components.

//.babelrc
{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["realar", {
      "include": [
        "src/components/*",
        "src/pages/*"
      ]
    }]
  ]
}

Enjoy and happy coding!