dialogue.js

import xs from 'xstream';

const model = action$ => {
  const reducer = (state = 0, action) => {
    switch(action.type) {
      case 'INCREASE':
        return state + 1
      case 'DECREASE':
        return state - 1
      default:
        return state
    }
  }

  return action$
    .startWith({ type: '@@INIT' })
    .fold(reducer)
}

const intent = sources => {
  const increase$ = sources.DOM
    .select('.increase')
    .events('click')
    .mapTo({type: 'INCREASE'})

  const decrease$ = sources.DOM
    .select('.decrease')
    .events('click')
    .mapTo({type: 'DECREASE'})

  return xs.merge(increase$, decrease$)
}

const view = state$ => state$.map(total => (
  <div>
    <h1>{ total }</h1>
    <button className="increase">+</button>
    <button className="decrease">-</button>
  </div>
))

export default function dialogue (sources) {
  return {
    DOM: view(model(intent(sources)))
  }
}

cool stuff!