React native和MobX:如何创建全球商店? [英] React native and MobX: How to create a global store?

问题描述

我目前正在尝试实现一个mobx存储，可以像这样从任何地方调用它:

I am currently trying to implement a mobx storage which I can call from everywhere like so:

import {userStore} from '../UserStore.js';

在文件末尾，我的导出功能如下:

At the end of the file, my export functionality looks as follows:

const userStore = new UserStore();
export {userStore};

据我了解，每次调用import功能时，都会重新创建对象，导入UserStore的多个文件不会共享同一变量.

As I understand, everytime I call the import functionality, the object gets re-created with which multiple files that import UserStore don't share the same variables.

但是，我希望每个导入UserStore的文件都导入具有完全相同变量的相同对象.我怎样才能做到这一点?我不太确定该如何实现，因此任何想法和示例都将不胜感激:)

However, I want that every file that imports UserStore imports the same object with the exact same variables. How can I achieve this? I am not fully sure how to achieve, so any ideas and examples would be appreciated :)

(如果有帮助的话)完整的代码(用于UserStore.js声明)如下(在导出语句的最底部)

The full code (for the UserStore.js declaration), if of any help, is as follows (look at the very bottom for the export statement)

import {observable, computed, action} from 'mobx';
import {ObservableMap, toJS} from 'mobx';
import {Fb} from './firebase.js';

class UserStore {

  /** GPS */
  @observable usrLng = 0.0;
  @observable usrLat = 0.0;
  @observable watchID = null;

  @action
  watchCurLocation() {
    this.watchID = navigator.geolocation.watchPosition((position) => {
      console.log("Recording GPS data from within the Store!!");
      this.usrLat = parseFloat(position.coords.latitude);
      this.usrLng = parseFloat(position.coords.longitude);
      }, (error) => console.log(JSON.stringify(error)), {
        enableHighAccuracy: true,
        timeout: 2000,
        maximumAge: 1000
      });
  }

  @action
  clearWatch() {
    navigator.geolocation.clearWatch(this.watchID);
  }
  /*/ GPS */

  /** BIKE BOOKING  */
  @observable interestBikeNo = -1;
  @observable bookedBikeNo = -1;

  @action
  setInterestBikeNo(bn) {
    this.interestBikeNo = bn;
  }

}

const userStore = new UserStore();
export {userStore};

推荐答案

您只需要UserStore类的单例实例

示例演示

let localInstance = null;

export class Apple {
  static newInstance() {
    if (! localInstance)
      localInstance = new Apple();
    return localInstance;
  }
}

// usage

import {Apple} from './apple';
const instance = Apple. newInstance();

您可以使用一个简单的功能

In your case, you can use a simple function

import {observable, computed, action} from 'mobx';
import {ObservableMap, toJS} from 'mobx';
import {Fb} from './firebase.js';

class UserStore {
  // omitted
}

let userStore;
export function getUserstore() {
  if (!userStore)
    userStore = new UserStore();
  return userStore;
};

代码中的某处

// instead of 
import {userStore} from './someUserStoreModule';

// use 
import {getUserstore} from './someUserStoreModule';
const userStore = getUserstore();

这篇关于React native和MobX:如何创建全球商店?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！