get-started.md

Get started

Realar's adventure will start from "value", is an immutable reactive container such as "store" from Redux terminology

import { value } from 'realar'

const store = value(0)

You can easily make functional update signals similar to an "action" from Redux

const inc = store.updater(state => state + 1)
const add = store.updater((state, num: number) => state + num)

Or you can use the usual functions for the state updating. Below will see different ways for it.

const inc = () => store.update(state => state + 1)
const add = (num: number) => store.val += num

Watch state updating

store.to((state) => console.log(state))

And run signals as usual functions

inc()     // console output: 1
add(10)   // console output: 11

Play on runkit

The next step is React binding. Realar provides the beautiful api for working with React, and now you can use the first function.

import { useValue } from 'realar'

const App = () => {
  const state = useValue(store)
  return (
    <>
      <p>{state}</p>
      <button onClick={inc}>+</button>
    </>
  )
}

Play full example on codesandbox