Mobx入門之一：observable & observer

被驚豔到

被Mobx這張簡單的函數響應式編程的原理圖驚豔到，足夠簡單，高效，因此決定入門

state纔是狀態管理的核心，Mobx有句話描述了什麼纔是真正的響應式，也就是他們正在作的：

Anything that can be derived from the application state, should be derived. Automatically.

下面進入第一課，observable & observer

 

環境搭建

1 create-react-app

npx create-react-app steps
cd steps && yarn start

2 安裝mobx, mobx-react

yarn add mobx mobx-react
yarn add react-app-rewired react-app-rewire-mobx --dev

3 修改配置文件

package.json

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
  }

 

config-overrides.js

const rewireMobX = require('react-app-rewire-mobx');

/* config-overrides.js */
module.exports = function override(config, env) {
  config = rewireMobX(config, env);
  return config;
}

 

4 源碼

import React, { Component } from 'react';
import {observable} from 'mobx'
import {observer} from 'mobx-react'

@observer class App extends Component {
  @observable count = 0

  render() {
    return (
      <div>
        Counter: {this.count} <br/>
        <button onClick={this.handleDec}>-</button>
        <button onClick={this.handleInc}>+</button>
      </div>
    )
  }

  handleInc = () => {
    this.count++
  }

  handleDec = () => {
    this.count--
  }
}

export default App;

 

5 分割state到store中

import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';

import React, { Component } from 'react';
import {observable} from 'mobx'
import {observer} from 'mobx-react'

const appState = observable({
  count: 0
})
appState.increment = function () {
  this.count++
}

appState.decrement = function () {
  this.count--
}

@observer class App extends Component {
  render() {
    return (
      <div>
        Counter: {this.props.store.count} <br/>
        <button onClick={this.handleDec}>-</button>
        <button onClick={this.handleInc}>+</button>
      </div>
    )
  }

  handleInc = () => {
    this.props.store.increment()
  }

  handleDec = () => {
    this.props.store.decrement()
  }
}

export default App;

ReactDOM.render(<App store={appState}/>, document.getElementById('root'));
registerServiceWorker();

 

6 去除store

import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';

import React, { Component } from 'react';
import {observable} from 'mobx'
import {observer} from 'mobx-react'

const appState = observable({
  count: 0
})
appState.increment = function () {
  this.count++
}

appState.decrement = function () {
  this.count--
}

@observer class App extends Component {
  render() {
    return (
      <div>
        Counter: {appState.count} <br/>
        <button onClick={this.handleDec}>-</button>
        <button onClick={this.handleInc}>+</button>
      </div>
    )
  }

  handleInc = () => {
    appState.increment()
  }

  handleDec = () => {
    appState.decrement()
  }
}

export default App;

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

 

observer derived from observable!

注意：要使得裝飾器@生效，能夠參考下面的文章：

https://mobx.js.org/best/decorators.html

https://github.com/timarney/react-app-rewired/tree/master/packages/react-app-rewire-mobx

 

參考資料：

https://egghead.io/lessons/javascript-sync-the-ui-with-the-app-state-using-mobx-observable-and-observer-in-react