State Management...follow

artydev

artydev

Posted on August 7, 2020

State Management...follow

Let's Mithril do it's magical 'autoredrawing'

// https://github.com/pakx/the-mithril-diaries/wiki/Model-Management-with-Meiosis

/* @jsx m */

const merge = mergerino;

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

const App = { view: () => app(states(), actions) };
m.mount(document.getElementById("app"), App);

function app(states, actions) {
  const { up, down, increment } = helpers(actions);
  return (
    <div>
      <div>{states.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 MithrilMeiosis

💖 💪 🙅 🚩
artydev
artydev

Posted on August 7, 2020

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

Sign up to receive the latest update from our blog.

Related

State Management...follow
mithril State Management...follow

August 7, 2020