🗡️
ConanJs
  • What is ConanJs?
  • Why ConanJs...
    • ... if coming from Redux
    • ... if using vanilla React
    • ... if learning React
    • ... if not using React
  • How to install/use ConanJs
  • About us / Github / Contact us
  • Demos
    • Demo Gallery
    • Conan State Demos
      • Hello World
      • Todos
        • Todos - Basic
        • Todos - Async
        • Todos - Optimistic
      • Github issues viewer
    • Conan Flow Demos
      • Authentication
  • CONAN DATA
    • General Concepts
    • Conan State
      • Actions & Reducers
        • Reducers
        • Actions
      • Creating State
      • Observing State
        • Live rendering
        • Connecting
      • Composing State
      • Scaling State
      • Orchestrating State
      • Life cycle
        • Async handling
        • Introspection
      • Testing state
    • Conan Flow
      • Creating Flows
      • Serialising Flows
      • Observing Flows
  • CONAN Runtime
  • Dependency Injection
    • General Concepts
    • Creating the Context
    • Using the Context
  • ASAPs
  • Logging
  • API
    • Main Classes
      • Conan
        • StateDef
      • ConanState
      • ConanFlow
        • UserFlowDef
        • UserStatusDef
        • Status
    • Conan State Classes
      • Thread
      • ConnectedState
      • MonitorInfo
      • MetaInfo
    • Dependency Injection
      • DiContextFactory
    • ASAPS
      • Asaps
      • Asap
Powered by GitBook
On this page
  • Easy to create and render
  • Easy to update
  • Easy to do async updates
  • Easy to derive and compose state
  • Demo
  • What's next?

Was this helpful?

  1. Demos
  2. Conan State Demos

Hello World

Have a look at the simplest example with Conan State.

PreviousConan State DemosNextTodos

Last updated 4 years ago

Was this helpful?

This is our attempt to wow you, note that this is only a sample of all the different ways to work with ConanState

Easy to create and render

you only need a name, and optionally, an initial state

//name: counter, initialState: 0
const yetAnotherCounter$ = Conan.light('counter', 0)

Conan has , meaning, you can inline the state in your renderer.

function render() {
    return yetAnotherCounter$.renderLive (
        (counterValue)=>(<h1>{counterValue}</h1>)
    )
}

Easy to update

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.

Easy to do async updates

Quick fact, with ConanJs you won't need boilerplate code to deal with asynchronous code.

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>)
}

Easy to derive and compose state

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>

Demo

What's next?

Are you ready to dive in?

In we will show you how to get this code running on your end.

Yes, show me more code!

Yes, I prefer reading up!

Just let me know how to start using it!

NO! :( Would you mind to let us know how we can improve?

To create a Conan State
live rendering
'How to install/use ConanJs'
https://docs.conanjs.io/tutorials/todos-sync
https://docs.conanjs.io/conan-state
https://docs.conanjs.io/how-to-install-use-conanjs
reaching out to us
You are probably speechless now...