webpack 配置react腳手架（五）：mobx

1.  配置項。使用mobx，由於語法時es6-next，因此先配置 .babelrc 文件

{
  "presets": [
    ["es2015", { "loose": true }],
    "stage-1",//改動了這裏
    "react"
  ],
  "plugins": ["transform-decorators-legacy", "react-hot-loader/babel"]
  //還有這裏，transform-decorators-legacy 放在 數組的第一項
}

安裝：

npm i transform-decorators-legacy babel-preset-stage-1 -D

npm i mobx-react -S

2. 使用 在store/app-state.js中：

import {
  observable,
  computed,
  autorun,
  action,
} from 'mobx'

export class AppState {//方便組件調用的時候 判斷props的類型
  @observable count = 0; //定義屬性值
  @observable name = 'jok'
  @computed get msg() { //定義計算屬性
    return `${this.name} say count is ${this.count}`
  }
  @action.add(){ //定義action 是由組件觸發該方法的
    this.count + =1;
  }
　@action.changeName(name){
　　this.name = name;
　 }
}
const appState = new AppState();

autorun(()=>{
  console.log(appState.msg); //一旦更新appState
})

setInterval(()=>{
  appState.add();//實時更新，觸發add的action
},1000)
export default appState;

調用方法：首先在 入口文件中，相似於使用 context的傳入方式，把外層組件包裹起來：

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'mobx-react'
import { AppContainer } from 'react-hot-loader' // eslint-disable-line

import App from './views/App'
import appState from './store/app-state'

const root = document.getElementById('root');
// 其實包裹組件的方式，使用的是context
const render = (Component) => {
  ReactDOM.hydrate(
    <AppContainer> 
      <Provider appState={appState}>
        <BrowserRouter>
            <Component />
        </BrowserRouter>
      </Provider>
    </AppContainer>,
    root,
  )
}

而後在業務組件中使用，因爲要用到 props，因此要先安裝 props-type： npm i prop-types -S 

import React from 'react'
import {
  observer,
  inject,
} from 'mobx-react'
import PropTypes from 'prop-types' 
import { AppState } from '../../store/app-state';
@inject('appState') @observer
// 入口文件中 Provider定義的名字 <Provider appState={appState}> 這裏引入什麼名字
// @observer 規定是觀察者模式，appState的狀態發生變化，則對應的這裏的數據也發生變化


export default class TopList extends React.Component {
  constructor(){
    super();
    this.changeName = this.changeName.bind(this);
    //由於在執行 onChange方法的時候，上下文已經不在組件內部了，因此要加上this指向
  }
  componentDidMount() {
    // do something here
  }
  changeName(event){
    this.props.appState.changeName(event.target.value);
  }
  render() {
    return [
      <div>
      <input type="text" onChange={this.changeName}/>
      <span>{this.props.appState.msg}</span>
      </div>
    ]
  }
}

TopList.propTypes = {
  appState: PropTypes.instanceOf(AppState).isRequired
}