mobx-create-store

mobx-create-store

This library is just a util on top of mobx.

Installation

$ npm install --save mobx mobx-react mobx-create-store

Usage

import React from "react"
import moment from "moment"
import { observer } from "mobx-react"
import { createStore } from "mobx-create-store"

const timer = createStore({
  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 observer(() => (
  <div>
    <p>{timer.time}<small>{timer.fraction}</small></p>
    <button onClick={timer.toggle}>{timer.label}</button>
  </div>
))

How it works

Under the hood createStore does the following:

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

All normal mobx gotchas apply.