DEV Community

artydev
artydev

Posted on • Edited on

2 1

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

Image of Bright Data

Global Data Access Unlocked – Reach data across borders without restrictions.

Unlock the power of global data collection with our advanced proxy solutions. Ideal for market research and more.

Unlock Data Now

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay