mobx-easy-state

mobx-easy-state

This library is just a util on top of mobx. The api is lifted from react-easy-state, which is excellent but doesn't support IE or react-native Android.

Introduction

Two rules:

• Always wrap your components with view.
• Always wrap your state store objects with store.

Installation

$ npm install --save mobx mobx-react mobx-easy-state

Usage

import React from "react"
import { view, store } from "mobx-easy-state"
import moment from "moment"

const timer = store({
  ticks: 0,
  id: null,
  toggle() {
    if (!this.id) {
      this.id = setInterval(() => this.ticks++, 10)
    } else {
      this.id = clearInterval(this.id)
    }
  },
  get time() {
    return moment(this.ticks * 10).format("mm:ss")
  },
  get fraction() {
    return moment(this.ticks * 10).format("SS")
  },
  get label() {
    return this.id ? "Stop" : "Start"
  },
})

export default view(() => (
  <div>
    <p>{timer.time}<small>{timer.fraction}</small></p>
    <button onClick={timer.toggle}>{timer.label}</button>
  </div>
))

How it works

Under the hood view is just an observer and store does the following:

• Turns key/value pairs into observables.
• Turns getters into computed properties.
• Decorates methods with action.bound.

All normal mobx gotchas apply.