yo-yo redux counter example

01_overview.md

02_index.js

import { createStore, applyMiddleware } from 'redux'
import yo from 'yo-yo'

const store = createStore(
  reducer,
  applyMiddleware(
    logger
  )
)

window.store = store

function reducer (state = { count: 0 }, action) {
  if (action.type == 'inc') {
    return { count: state.count + 1 }
  }

  if (action.type == 'dec') {
    return { count: state.count - 1 }
  }

  return state
}

function logger ({ getState }) {
  return (next) => (action) => {
    console.group(`action \`${action.type}\``)
    action.payload && console.log(action.payload)
    console.log('state before', getState())
    const nextAction = next(action)
    console.log('state after', getState())
    console.groupEnd()
    return nextAction
  } 
}

function app (state, dispatch) {
  return yo`
    <div>
      <h1>Counter: ${state.count}</h1>
      <button onclick=${(e) => dispatch({ type: 'inc' })}>+</button>
      <button onclick=${(e) => dispatch({ type: 'dec' })}>-</button>
    </div>
  `
}

function run (root) {
  const { getState, dispatch } = store
  const state = getState()
  const el = root(state, dispatch)

  store.subscribe(() => {
    const state = store.getState()
    yo.update(el, root(state, dispatch))
  })

  document.body.appendChild(el)
}


run(app)