react native typescript mobx template

Отрешите Native, TypeScript и MOBX

Это важный пример для создания приложения реагирования с использованием TypeScript и MOBX.

Шаг, чтобы бежать

1. Клонировать репо
2. yarn install или npm install
3. react-native eject
4. react-native run-ios или react-native run-android

Определить модель

 import Cause from "./Cause"
import User from "./User"
import CommonModel from "./CommonModel"

export declare type Deals = Deal [ ]

export declare type UDeal = Deal | undefined

export default interface Deal extends CommonModel {
    key : string
    dealType : string
    title : string
    price : number
    makerPercentage : number
    description : string
    tags : string
    url : string
    media : string [ ]
    cause ?: Cause | null
    user ?:  User | null
}

Определите магазин

 import { observable , action , runInAction , computed , IObservableValue } from 'mobx'
import { Deals } from '../models/Deal'
import { dealService } from '../services/deal/DealService'

export default class AppStore {
    @ observable isLoading : boolean = true
    @ observable isFailure : boolean = false
    @ observable searchTerm : IObservableValue < string > = observable . box ( "" )
    @ observable deals : Deals = [ ]
    @ observable currentDealId : string | null = null

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

    async fetchDeals ( ) {
        dealService . searchData ( this . searchTerm . get ( ) ) . then ( data => {
            runInAction ( ( ) => {
                this . isLoading = false
                this . deals = data
            } )
        } )
    }

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

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

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

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

Позвонить в компонент

 export interface Props {
  appStore : AppStore
}

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

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

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

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

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

Если вы видите какую -либо проблему, пожалуйста, не стесняйтесь создавать здесь проблему или сможете связаться со мной по электронной почте [email protected] или LinkedIn

Спасибо

ссылки

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