Frontend State Management , Meiosis and Mergerino to the rescue

mergerino: an immutable merge utility for state management.

meiosis : '...a simple pattern to manage state in your web applications'.

Nothing more to say, just admire.

const merge = mergerino

const state =  {count: 0}
const update = m.stream();
const states = m.stream.scan(merge, state, update)
const actions = Actions(update)

states.map(state =>  view(state, actions)) 

function view(state, actions) {
  const {up, down, increment} = helpers(actions)
  m.render(app, 
    <div>
      <div>{state.count}</div>
      <button onclick = {increment(up)}>inc</button>
      <button onclick = {increment(down)}>dec</button>
    </div>
  )
}

function helpers (actions)  { 
  return {
    up : 1,
    down: -1,
    increment : (direction, incr = 1) => 
      () => actions.onclick(direction * incr) 
  }
}

function Actions (update) {
  return {
    onclick: onclick
  }
  function onclick (incr) {
    update({
      count: (value) => value + incr
    })
  }
}

You can test it here MeiosisMergerino

Blog

Frontend State Management , Meiosis and Mergerino to the rescue

artydev

Join Our Newsletter. No Spam, Only the good stuff.

Related