try-deku.js

/** @jsx element */
import {dom, element} from '../src'
import {createStore, combineReducers} from 'redux'
let {createRenderer} = dom

let myReducer = (state = { message: 'hello, world', count: 0 }, action)=> {
  switch (action.type) {
  case 'CLICKED':
    return {
      message: `hello, diff-${state.count}`,
      count: state.count + 1,
    };
  default:
    return state;
  }
}

// Dispatch an action when the button is clicked
let myAction = dispatch => event => {
  dispatch({
    type: 'CLICKED'
  })
}

// Create a Redux store to handle all UI actions and side-effects
let store = createStore((combineReducers({myReducer})))

// Create a renderer that can turn vnodes into real DOM elements
let render = createRenderer(document.body, store.dispatch)

// Define a state-less component
let MyButton = {
  render: ({ props, children, dispatch, context }) => {
    return <button onClick={myAction(dispatch)}>{context.myReducer.message}</button>
  }
}

// Update the page and add redux state to the context
render(
  <MyButton />,
  store.getState()
)

store.subscribe(()=> {
  render(
    <MyButton />,
    store.getState()
  )
});