This is an exploration into the "dream code" I wish I could write to make a quick single page app

actions.js

// Since es6 exports are statically validated, we have no need to use stringy
// programming to identify which action to run in response to which event

import { render } from 'some-lib'

export function increment ({ state, emit }) {
  state.counter += 1
  emit(render)
}

export function decrement ({ state, emit }) {
  if (state.counter > 0) {
    state.counter -= 1
    emit(render)
  }
}

index.js

import { createApp } from 'some-lib'
import { store } from './store'
import { view } from './view'

const el = createApp(store, view)
document.body.appendChild(el)

store.js

import { createStore } from 'some-lib'
import * as actions from './actions'

export function store () {
  const state = inititalState()
  return createStore(state, actions) // can pass in a whitelist of actions as the second argument as shown, but is optional
}

function initialState () {
  // You can choose to return an immutable object here
  return {
    counter: 0
  }
}

view.js

import html from 'nanohtml'
import css from 'emotion'
import { increment, decrement } from './actions'

// We emit the reference to the action, we do not execute the action directly
// The store will handle running the actions in order, dealing with side effects, etc

export function view (state, emit) {
  return html`
    <div class=${css`
      background-color: pink;
      width: 200px;
      margin: 0 auto;
    `}>
      <h1>Count is ${state.counter}</h1>
      <button onclick=${emit(increment)}>Increment</button>
      <button onclick=${emit(decrement)}>Decrement</button>
    </div>
  `
}