Decca Redux example

by Rico Sta. Cruz

HTML

<!-- [email protected] -->
<script src="//brcdn.org/7Rc1tAN1wLhq7ITWBpVjs02l51M.js"></script>
<!-- [email protected] -->
<script src="//brcdn.org/WESLWQYmDmCMpLQi5zanEbpC7pU.js"></script>
<!-- [email protected] -->
<script src="//brcdn.org/TLFKVURd3HOnHNbmv6InI97d0N4.js"></script>

Babel + JSX

/** @jsx element */
const { dom, element } = decca
const { createStore } = redux

/*
 * Redux store
 */

const store = createStore(function (state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { num: state.num + 1 }
    case 'DECREMENT':
      return { num: state.num - 1 }
  }
  return state
}, { num: 0 })

/*
 * Decca component
 */

const App = {
  render ({ context, dispatch }) {
    return <div>
      Number: {context.num}<br/>
      <button onclick={sub(context, dispatch)}>–</button>
      <button onclick={add(context, dispatch)}>+</button>
    </div>
  }
}

/*
 * Event handlers
 */

const add = (context, dispatch) => (e) => {
  dispatch({ type: 'INCREMENT' })
}

const sub = (context, dispatch) => (e) => {
  dispatch({ type: 'DECREMENT' })
}

/*
 * Render
 */

var render = dom.createRenderer(document.body, store.dispatch)
var update = () => { render(<App />, store.getState()) }
store.subscribe(debounce(update, 0))
update()