react native javascript mobx template

反應本地，JavaScript和MOBX

這是使用JavaScript和MOBX構建React-Native應用程序的重要示例。

1. 克隆倉庫
2. yarn install或npm install
3. react-native eject
4. react-native run-ios或react-native run-android

定義商店：

 import { observable , action , runInAction , computed , autorun } from 'mobx' ;
import ajax from '../util/ajax'

export default class AppStore {
    @ observable isLoading = true
    @ observable isFailure = false
    @ observable searchTerm = observable . box ( "" )
    @ observable deals = [ ]
    @ observable currentDealId = null

    constructor ( ) {
        this . searchTerm . observe ( ( value ) => {
            this . fetchDeals ( value . newValue )
        } , true )
    }

    async fetchDeals ( ) {
        ajax . fetchDealSearchResults ( this . searchTerm ) . then ( data => {
            runInAction ( ( ) => {
                this . isLoading = false
                this . deals = data
            } )
        } )
    }

    @ action setSearchTerm ( searchStr ) {
        this . searchTerm . set ( searchStr )
    }

    @ action
    setCurrentDeal ( dealId ) {
        this . currentDealId = dealId
    }

    @ action
    unsetCurrentDeal ( ) {
        this . currentDealId = null
    }

    @ computed get currentDeal ( ) {
        return this . deals . find ( ( deal ) => deal . key === this . currentDealId )
    }
}

調用組件：

@ inject ( "appStore" ) @ observer
class App extends React . Component {

  searchDeals = ( searchTerm ) => {
    this . props . appStore . setSearchTerm ( searchTerm )
  }

  setCurrentDeal = ( dealId ) => {
    this . props . appStore . setCurrentDeal ( dealId )
  }

  unsetCurrentDeal = ( ) => {
    this . props . appStore . unsetCurrentDeal ( )
  }

  render ( ) {
    const appStore = this . props . appStore
}
}

如果您看到任何問題，請隨時在此處創建一個問題，或者可以通過電子郵件[email protected]或LinkedIn與我聯繫。

謝謝

參考

1. https://facebook.github.io/reaeact-native/docs/tutorial
2. https://github.com/jscomplete/reaeact-native-essential-training
3. https://mobx.js.org
4. https://www.tutorialspoint.com/es6