上一节中<App/>组件传递状态temperatures给children -- <TemperatureInput />，如果组建是一个tree, 那么属性的传递则会非常繁琐。redux使用Provider给子组件提供store, connect将子组件和store联系起来，mobx使用Provider和inject注入

import ReactDOM from 'react-dom'
// import registerServiceWorker from './registerServiceWorker';
import React from 'react'
import { action, computed, observable } from 'mobx'
import { Provider, observer, inject } from 'mobx-react'
import DevTools from 'mobx-react-devtools'
const APPID = '415a88f2b45f08c3e561b058772ec6c3'class Temperature {id = Math.random()@observable unit = 'C'@observable temperatureCelsius = 25@observable location = 'Amsterdam, NL'@observable loading = trueconstructor (location) {this.location = locationthis.fetch()}@computed get temperatureKelvin () {console.log('calculating Kelvin')return this.temperatureCelsius * (9 / 5) + 32}@computed get temperatureFahrenheit () {console.log('calculating Fahrenheit')return this.temperatureCelsius + 273.15}@computed get temperature () {console.log('calculating temperature')switch (this.unit) {case 'K':return this.temperatureKelvin + '°K'case 'F':return this.temperatureFahrenheit + '°F'case 'C':return this.temperatureCelsius + '°C'default:return this.temperatureCelsius + '°C'}}@action fetch () {window.fetch(`http://api.openweathermap.org/data/2.5/weather?appid=${APPID}&q=${this.location}`).then(res => res.json()).then(action(json => {this.temperatureCelsius = json.main.temp - 273.15this.loading = false}))}@action setUnit (newUnit) {this.unit = newUnit}@action setCelsius (degrees) {this.temperatureCelsius = degrees}@action('update temperature and unit')setTemperatureAndUnit (degrees, unit) {this.setUnit(unit)this.setCelsius(degrees)}@action inc() {this.setCelsius(this.temperatureCelsius + 1)}
}@inject('temperatures')
@observer
class TemperatureInput extends React.Component {@observable input = ''render () {return (<li>Destination<input value={this.input}onChange={this.onChange}/><button onClick={this.onSubmit}>Add</button></li>)}@action onChange = e => {this.input = e.target.value}@action onSubmit = () => {this.props.temperatures.push(new Temperature(this.input))this.input = ''}
}
@observer
class TView extends React.Component {render () {const t = this.props.temperaturereturn (<li key={t.id} onClick={() => this.onTemperatureClick()}>{t.location}: {t.loading ? 'loading...' : t.temperature}</li>)}@action onTemperatureClick = () => {this.props.temperature.inc()}
}
const App = inject('temperatures')(observer(({ temperatures }) => (<ul><TemperatureInput />{temperatures.map(t =><TView key={t.id} temperature={t} />)}<DevTools/></ul>)))const temps = observable([])ReactDOM.render(<Provider temperatures={temps}><App /></Provider>,document.getElementById('root')
)