mobx-boost

mobx, mobs-state-tree, mobx-react, mobx-react-devtools, mobx-utils, as 1 pkg

note

• mobx-state-tree & mobx both export decorate and flow
• mobx-state-tree's variants are exported as mstDecorate & mstFlow
• mobx-react-devtools exports DevTools as default, here it is exported as DevTools

imports

each package can be imported by using the main entry point

import React from 'react'
import {render} from 'react-dom'
import {observer, observable, action, DevTools} from 'mobx-boost'

const state = observer({
  eh: 'default',
})
state.setEh = action(value => (state.eh = value))

@observer
class Eh extends React.Component {
  state = state
  componentWillMount() {
    this.state.setEh('eh')
  }
  render() {
    return <h1>{String(this.state.eh)}</h1>
  }
}
const App = () => (
  <React.Fragment>
    <DevTools />
    <Eh />
  </React.Fragment>
)

render(<App />, document.getElementById('root'))

or by importing the package from the path

import {observer} from 'mobx-boost/mobx-react'
import {observable} from 'mobx-boost/mobx'

or by importing using the dependency (the packages are dependencies, but use caution if you have them in your project's dependencies so that the versions match)

import {observer} from 'mobx-react'
import {observable} from 'mobx'

exports

• there is no default export, all exports are re-exported, so tree shaking will work the same way

packages

• mobx
• mobx-state-tree
• mst-middlewares
• mobx-react
• mobx-react-devtools
• mobx-utils

related

• medium article on apollo-boost