Hello World
Have a look at the simplest example with Conan State.
This is our attempt to wow you, note that this is only a sample of all the different ways to work with ConanState
//name: counter, initialState: 0
const yetAnotherCounter$ = Conan.light('counter', 0)
function render() {
return yetAnotherCounter$.renderLive (
(counterValue)=>(<h1>{counterValue}</h1>)
)
}
Every ConanState has two actions available immediately: 'update' and 'updateAsap'.
Let's add some buttons now tow change the state of the counter:
function render() {
return (<div>
yetAnotherCounter$.renderLive (
(counterValue)=>(<h1>{counterValue}</h1>)
)
<button onClick={()=>yetAnotherCounter$.do.update(3)}>
setValueTo3
</button>
<button onClick={()=>yetAnotherCounter$.do.update(current=>++current)}>
increase by one
</button>
</div>)
}
Note how we can use the update method to either provide a new value, or we can provide a reducer to provide a value that is based on its current value.
Quick fact, with ConanJs you won't need boilerplate code to deal with asynchronous code.

You are probably speechless now...
Let's add two buttons to show async updates to the value.
function render() {
return (<div>
yetAnotherCounter$.renderLive (
(counterValue)=>(<h1>{counterValue}</h1>)
)
<button onClick={()=>yetAnotherCounter$.do.update(3)}>
setValueTo3
</button>
<button onClick={()=>yetAnotherCounter$.do.update(current=>++current)}>
increase by one
</button>
<button onClick={()=>yetAnotherCounter$.do.updateAsap(
Asaps.delayed(3, 1000)
)}>
setValueTo3 - asnyc
</button>
<button onClick={()=>yetAnotherCounter$.do.updateAsap(
Asaps.delayed(current=>++current, 1000)
)}>
increase by one - async
</button>
</div>)
}
Let's filter only even numbers, and double the current value of the state
<h1>
EVEN NUMBERS: {yetAnotherCounter$.filter(it=>it % 2 === 0).connectLive (
(counterValue)=>(<span>{counterValue}</span>)
)}
</h1>
<h1>
DOUBLE: {yetAnotherCounter$.map(it=>it * 2).connectLive (
(counterValue)=>(<span>{counterValue}</span>)
)}
</h1>