react native javascript mobx template

Bereaksi asli, javascript dan mobx

Ini adalah contoh penting untuk membangun aplikasi asli reaksi menggunakan JavaScript dan Mobx.

1. Kloning repo
2. yarn install atau npm install
3. react-native eject
4. react-native run-ios atau react-native run-android

Tentukan toko:

 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 )
    }
}

Hubungi komponen:

@ 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
}
}

Jika Anda melihat masalah apa pun, jangan ragu untuk membuat masalah di sini atau dapat menghubungi saya melalui email [email protected] atau LinkedIn

Terima kasih

referensi

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