React native 和 MobX:如何创建全球商店?

Question

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

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

在文件末尾，我的导出功能如下所示：

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

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

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

完整的代码(用于UserStore.js声明)，如果有任何帮助，如下所示(查看最底部的导出语句)

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

Answer 1

你只需要一个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();

在您的情况下，您可以使用一个简单的函数

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();