sketch of a simple wrapper for predictable, namespaced choo stores

choo-store.js

/*

Now a real module used in production!
https://github.com/ungoldman/choo-store

*/

class Store {
  constructor (opts) {
    opts = opts || {}
    if (!opts.namespace) throw new Error('namespace required')
    if (!opts.initialState) throw new Error('initialState required')
    if (!opts.events) throw new Error('events required')
    Object.assign(this, opts)
    this.connect = this.connect.bind(this)
  }

  connect (state, emitter) {
    const { namespace, initialState, events } = this

    state[namespace] = initialState

    Object.keys(events).forEach(event => {
      emitter.on(`${namespace}:${event}`, action(opts => {
        events[event](opts, state[namespace], emitter, state)
      }))
    })

    emitter.on(`${namespace}:reset`, action(opts => {
      state[namespace] = initialState
    }))

    function action (fn) {
      return opts => {
        opts = opts || {}
        fn(opts)
        if (opts.render) emitter.emit('render')
      }
    }
  }
}

const clickStore = new Store({
  namespace: 'clicks',
  initialState: { counter: 0 },
  events: {
    increment: (opts, store, emitter, state) => {
      store.counter++
    }
  }
})

app.use(clickStore.connect)

// later

emit('clicks:increment')
// state.clicks.counter === 1