• Machine: a machine can emit Update to a timeline update$, and can be operated by calling function in actions
  • Plan: a Plan is a function that describe how to create a Machine
  • Update: a function of currentState -> nextState
  • Action: a function that create instance of Intent
  • Intent: describe what you want to do
  • Intent Stream: a timeline of every Intent created by each Action

Quick Start

Sorry we don’t have a book to document how to use xreact, and I don’t really need to, there’s only 3 things you should notice when using xreact, I’ll explain by a simple counter app.

See the Pen XREACT by Jichao Ouyang (@jcouyang) on CodePen.

1. Define a simple stateless View component

const CounterView = ({actions, count}) => (
    <button onClick={actions.dec}>-</button>
    <button onClick={actions.inc}>+</button>

every View component expected a actions fields in props

2. Define a Plan

After we have a pretty view for representation and interacting interface, we can define how to update the view, or “how to react on actions”. In such case:

  1. A counter can have actions of inc and dec, which will send Intent of {type: 'inc'} or {type:'dec'} to Intent Stream upon being called.
  2. A counter reactivity generates Update when it receives an Intent of either type inc or dec.
const plan = (intent$) => {
  return {
    update$: intent$.map(intent => {
      switch (intent.type) {
        case 'inc':
          return state => ({ count: state.count + 1 });
        case 'dec':
          return state => ({ count: state.count - 1 });
          return _ => _;
    actions: {
      inc: () => ({ type: 'inc' }),
      dec: () => ({ type: 'dec' })

a Plan will take intent$(Intent Stream) and return a Machine.

a Machine defines

  • how you can act on the machine
  • how the machine will react on intents.

3. Plan X View

import {render} from 'react-dom'
import {x, X} from 'xreact/lib/x'
import * as rx from 'xreact/lib/xs/rx'

const Counter = x(plan)(CounterView)

  <X x={rx}>
    <Counter />

Counter is product(x) of plan and CounterView, which means it can react to Intent as it’s plan, and update CounterView

<X></X> will provide a intent$ instance.

Type Safe Counter

If you are TypeScript user and want to enjoy a type safe counter app, it’s simple to do so since xReact is written 100% in TypeScript.

See the Pen XREACT Counter in TypeScript by Jichao Ouyang (@jcouyang) on CodePen.

Fantasy 🌈 Counter

If you come from 🌈 fantasy land, you cound try fantasy version of xreact in less verbose and more functional scheme. More about FantasyX…

See the Pen XREACT FANTASY COUNTER by Jichao Ouyang (@jcouyang) on CodePen.