Как назначить / получить доступ к данным из Mobx в React Native? - PullRequest
Новая
       7

Как назначить / получить доступ к данным из Mobx в React Native?

0 голосов
/ 17 мая 2018

В настоящее время я использую mobx и реагирую на нативный. Я создал файлы ниже, где пользователь может получить свое географическое местоположение. У меня есть следующие вопросы:

  1. В функции fetchLocation это правильный способ присвоения возвращаемой позиции? (С точки зрения лучшей практики MOBX)
  2. В fetchLocation, как я могу консоль журнала гео, как я пытался, и я получил неопределенный.
  3. В LocationScreen.js я пытаюсь получить доступ к значению для гео, как я могу это сделать? Я могу нормально запустить функцию fetchLocation.

  4. Как мне сделать что-то похожее на это -

    {this.props.store.geo? Получено Geo Местоположение: ноль}

Заранее спасибо

LocationStore.js: 

import { observable, action, computed } from 'mobx'
class LocationStore{

  @observable geo = [];

  @action fetchLocation() {
    navigator.geolocation.getCurrentPosition(
      (position) => {

        console.log(position.coords.latitude, position.coords.longitude);
        this.geo = {
          lat: position.coords.latitude
        }
        console.log(this.geo);
      },
      (error) => this.error= {error},
      { enableHighAccuracy: false, timeout: 20000 },
    );
  }
}

export default new LocationStore()

LocationScreen.js

1 Ответ

0 голосов
/ 10 июня 2018

Ясно, что вы используете @action без обещаний! Я бы предложил отказаться от @action и @computed и просто найти решение без сохранения состояния:

LocationStore.js: 

import {observable} from 'mobx'
class LocationStore {

@observable geo = {};
@observable error = {};
@observable isLoading = false;

async fetchLocation() {
    this.isLoading = true;
    try {
       await navigator.geolocation.getCurrentPosition((position) => {
                this.geo = {
                    lat: position.coords.latitude
                }
             this.isLoading = false;
            }
        );
    } catch (e) {
        this.error = e
        this.isLoading = false;
    }
  }
}
export default new LocationStore()

component.js 

async fetchLocation(){
    await this.props.LocationStore.fetchLocation();
}
render () {
    const { geo, error, isLoading } = this.props.LocationStore
    return (<View>
        <Button onPress={this.fetchLocation.bind(this)}></Button>
        {(!!isLoading)?<Text>{geo}</Text>:<Text>Loading</Text>}
    </View>)
}

Проверьте 'async / await' для получения дополнительной информации: https://mobx.js.org/best/actions.html

...