Reducer-based Rx MVC Framework

index.js

import view from './view'

document.querySelector('#root').appendChild(view())

model.js

import { model } from './radx'

export const increment = () => ({ type: 'INCREMENT' })
export const decrement = () => ({ type: 'DECREMENT' })

export const initialState = { count: 0 }

export const getCount = state => state.count

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return Object.assign({}, state, {
        count: state.count + 1
      })
    case 'DECREMENT':
      return Object.assign({}, state, {
        count: state.count - 1
      })
    default:
      return state
  }
}

export default model(reducer)

radx.js

import Rx from 'rxjs/Rx'

export const model = reducer => action$ =>
  action$.map(action => state => reducer(state, action))

export const view = (observer, initialState, ...observables) =>
  Rx.Observable
    .merge(...observables)
    .startWith(initialState)
    .scan((state, updateFn) => updateFn(state))
    .subscribe(observer)

export const controller = (event, elem, action) =>
  Rx.Observable.fromEvent(elem, event).map(action)

view.js

import { view, controller } from './radx'
import handle, { getCount, increment, decrement, initialState } from './model'

export default () => {
  const incrementBtn = document.createElement('button')
  incrementBtn.innerText = 'increment'

  const decrementBtn = document.createElement('button')
  decrementBtn.innerText = 'decrement'

  const countSpan = document.createElement('span')

  const wrapperDiv = document.createElement('div')
  wrapperDiv.appendChild(incrementBtn)
  wrapperDiv.appendChild(decrementBtn)
  wrapperDiv.appendChild(countSpan)

  const render = state => (countSpan.innerText = getCount(state))

  const increment$ = controller('click', incrementBtn, increment)
  const decrement$ = controller('click', decrementBtn, decrement)

  view(render, initialState, handle(increment$), handle(decrement$))

  return wrapperDiv
}