MVI pattern using redux-like actions/reducer

Dialogue.js

import xs from 'xstream';
import {div, button} from '@cycle/dom'

function view(state$) {
  const vtree$ = state$.map( state => 
    div([
      button('.increase', 'Moar'),
      button('.decrease', 'Less'),
      div(`Count: ${state.count}`)
    ])
  )
  return vtree$
}

function intent(interaction$) {
  const increase$ = interaction$
    .select('.increase')
    .events('click')
    .mapTo({type: 'INCREASE'})

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

  const action$ = xs.merge(increase$, decrease$)
  return action$
}

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

  const state$ = action$.fold(reducer, {count: 0})
  return state$
}

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