cheatsheets/mobx.md

title	category
Mobx	JavaScript libraries

Properties

import {observable, computed} from 'mobx'

class Page {
  @observable title = ''
  @observable published = false

  @computed get authorName () {
    return this.author || 'Anonymous'
  }
}

Actions

class Page {
  @action publish () {
    this.published = true
    // do ajax/async here if you like
  }
}

Plain objects

const person = observable({
  name: 'Ella Fitzgerald'
})

const temp = observable(23)
temp.get()
temp.set(25)
temp.observe(...)

Reactions

import {autorun, autorunAsync, when} from 'mobx'

autorun()

// Runs it, finds out what it accessed, then observe those
autorun(() => {
  console.log(page.title)
})

when()

class Foo {
  constructor () {
    when(
      () => !this.isVisible,
      () => this.doSomething())
  }
}

React

import { observer } from 'mobx-react'

@observer
class PageView extends React.Component {
  render () {
    return <div>{this.props.page.title}</div>
  }
}

<PageView page={page} />

Functional components

import { observer } from 'mobx-react'

const PageView = observer(({page}) => {
  <div>{page.title}</div>
})

<PageView page={page} />

References

• https://github.com/mobxjs/mobx