redux + hyperx + main-loop

index.js

var redux = require('redux')
var vdom = require('virtual-dom')
var hyperx = require('hyperx')
var hx = hyperx(vdom.h)

var reducer = require('./reducer')
var store = redux.createStore(reducer)

var item = function (state) {
  function onclick () {
    store.dispatch({ type: 'INCREMENT'})
  }
  return hx`<div><span>${state}</span><button onclick=${onclick}></button></div>`
}

var list = function (state) {
  return hx`<div>${state.value.map(function (d) {return item(d)})}</div>`
}

var main = require('main-loop')
var loop = main({value: [0]}, render, vdom)

document.body.appendChild(loop.target)

function render (state) {
  return list(state)
}

function update () {
  loop.update(store.getState())
}

store.subscribe(update)

reducer.js

module.exports = function (state, action) {
  if (typeof state === 'undefined') state = {value: [0]}

  console.log(state)
  console.log(action)

  switch (action.type) {
    case 'INCREMENT':
      return Object.assign(state, {value: state.value.concat([1])})

    default:
      return state
  }
}