#mobx應用在rn項目中

 

第一步先創建一個相似redux中reducer的文件
runInAction能夠解決獲取異步數據問題

import { observable, action, runInAction } from 'mobx'

class List {
  // 樹葉變成響應數據
  @observable listData: Array<any> = []

  // @computed計算屬性
  // MobX 配置爲須要經過動做來更改狀態時，必須使用 action，作一些事件
  @action
  getCateData () {
    fetch('https://ik9hkddr.qcloud.la/mock/cookbook-list.json')
      .then(reponse => reponse.json())
      .then(result => {
        runInAction(() => {
          this.listData = result.data
        })
      })
  }
}

export default new List()

第二步在 利用mobx-react將mobx和react粘合，並在componentDidMount鉤子中觸發獲取數據的函數action

import React from 'react'
import { Provider } from 'mobx-react'

import Home from './pages/home/Home'
import store from './store'

export default class componentName extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Home></Home>
      </Provider>
    )
  }

  componentDidMount () {
    store.list.getCateData()
  }
}

第三步將store注入要用數據的組件

import { observer, inject } from 'mobx-react'
interface Props {
  store?: any
}

interface State {
  hotCateList: Array<any>
  list: Array<any>
}
//inject將store注入組件
@inject('store')
// @observer吧數據變成響應式
@observer
export default class componentName extends Component<Props, State> {
}

第四步 直接在樹枝上獲取數據，在render中渲染

render() {
    const listData = this.props.store.list.listData
    return ()}