MobX @connect decorator for your react/inferno components
npm install mobx-connect
+
+
@connect decorator for react/inferno components.
@connect from react-redux.
@connect 2 things happen:
this.context.
javascript
import React from 'react'
import { connect } from 'mobx-connect'
@connect
class App extends React.Component {
toggleSetting(key) {
const { settings} = this.context.state
settings[key] = !settings[key]
}
render() {
const { settings } = this.context.state
return
}
}
const SettingsView = connect(function(props, context) {
const { settings } = context.state
return
Settings
Fullscreen: {settings.fullscreen ? 'OFF' : 'ON'}
Logger: {settings.fullscreen ? 'OFF' : 'ON'}
})
`
Usage example (inferno.JS)
`javascript
import Inferno from 'inferno'
import Component from 'inferno-component'
import { connect } from 'mobx-connect/inferno' // <----
@connect
class App extends Component {
// Everything else same as with React...
}
`
Configuration
Ccreate a file called ContextProvider.js.
We need to wrap our root component (App in this case) around this ContextProvider before rendering.
`javascript
const React = require('react')
const { contextTypes } = require('mobx-connect')
class ContextProvider extends React.Component {
getChildContext() {
return this.props.context;
}
render() {
return this.props.children;
}
}
ContextProvider.childContextTypes = contextTypes;
`
Then we define our default state and our store methods which affect the state.
`javascript
const { observable } = require('mobx')
const context = {
// An observable mobx object
state: observable({
username: ''
}),
store: {
// Your methods that affect the state here
// You can make this object deeper for more complicated structures
// or import from another file
setUsername(username) {
context.state.username = username;
}
}
}
`
Finally we inject context into our app and render HTML on the browser
`javascript
ReactDOM.render(
, document.getElementById('content'));
`
Usage with React-router
`javascript
const React = require('react')
const ReactDOM = require('react-dom')
const { observable } = require('mobx')
const { Router, RouterContext, browserHistory } = require('react-router')
const ContextProvider = require('./ContextProvider') // or where ever you put it
const routes = require('./routes') // or where ever you put it
const context = {
state: observable({}),
store: {}
}
function createElement(props) {
return
}
// Render HTML on the browser
ReactDOM.render( render={createElement}
routes={routes}/>,
document.getElementById('container'))
`
Usage with Inferno-router
`javascript
import Inferno from 'inferno'
import Component from 'inferno-component'
import InfernoDOM from 'inferno-dom'
import { observable } from 'mobx'
import ContextProvider from './ContextProvider'
import routes from './routes'
const context = {
state: observable({}),
store: {}
}
// Render HTML on the browser
InfernoDOM.render(
{routes}
,
document.getElementById('root'))
ReactDOM.render( render={createElement}
routes={routes}/>,
document.getElementById('container'))
``