mState

A dead simple state management library for Mithril.js

Install

npm i @zerox-dg/mstate

Why mState?

mState is a dead simple solution for state management for Mithril.js. While the core is really simple < 100 lines, mState is very flexible and it's actually only ~1kb minified.

Concept

The following diagram illustrate how mState works.

As you can see the global state can be modified using action called from the component or directly modifed by the component (for simplicity). That means you can completely drop the actions.

Example

The first step to do is to initialize a state and some actions.

CounterStore.js

import { makeState, registerState } from "mState";

const state = {
  counter: 0
};

const actions = {
  INCREASE(state, amount) {
    state.counter += amount;
  }
};

export default () => {
  makeState("CounterStore", state).withActions(actions);
};

App.js

import makeCounterStore from "./CounterStore";
makeCounterStore();
// mounting to #root/#app element...

After that you can inject it to any component with inject(). After injecting, the state will be available in vnode.attrs.

MyComponent.js

import { inject, callAction } from "mState";

const increaseCounter = vnode => {
  // you can modify state in 3 ways
  // action call with _call function in injected state
  vnode.attrs.CounterStore.counter._call("INCREASE", 1);
  // action call with callAction function from mState
  callAction("CounterStore", "INCREASE", 1);
  // directly modify the state
  vnode.attrs.CounterStore.counter += 1;
};

// closure component
const myComponent = () => {
  return {
    view(vnode) {
      const { counter } = vnode.attrs.CounterStore;
      return m(
        "h1",
        { onclick: () => increaseCounter(vnode) },
        `Counter: ${counter}`
      );
    }
  };
};
export default inject(myComponent, ["CounterStore"]);

Author

• Hung Nguyen (twitter)

License

MIT