Meteor + Mobx + React Native

1

I asked this question over on the Mobx github repo as well:

I am starting a project and hope to use Mobx for my state management, my single reactive source of truth. My stack is as follows:

react-native v0.59.6
mobx v5.9.4
mobx-react v5.4.3
Wix react-native-navigation v2.18.x
meteor JS v1.8.1

I’ve gotten Mobx + Meteor to work by subscribing to my Meteor data at the component layer and then pushing that data to my Mobx store like so:

import  ...

@inject("userStore")
@observer
class Home extends Component {

  static getDerivedStateFromProps(nextProps, prevState) {
   /*
      push the data to my Mobx store here...
      this.props.userStore.setUserData(nextProps.someData) //may be called a few times
   */
       
  }

render() {
  return (
  //will re-render as Meteor data is updated and when data is pushed to Mobx
  <View>
  <Text>{this.props.userStore.getUserData}</Text>
  <Button onPress={() => this.getData} />
</View>
 )
 }
}

export default withTracker(() => {
  return {
    someData: Meteor.subscribe("moreData"),
    user: Meteor.user(),
    userLoggingIn: Meteor.loggingIn(),
    userId: Meteor.userId()
  };
})(Home);

This method is highly inefficient as the component will render multiple times unnecessarily.

I would like to move all my Meteor code to my Mobx stores so I can avoid the unnecessary re-renders.

Is there anyway I can subscribe to my Meteor data from within my Mobx stores?

Ive tried the following so far in my store:

import { action, observable, computed, autorun, observe } from "mobx";
import Meteor, { withTracker, Tracker } from "@socialize/react-native-meteor";

class UserStore {
  constructor() {
    autorun(() => console.log(Meteor.loggingIn(), "autorun")); //never re-runs even when I log in and out

    Tracker.autorun(() => {
      console.log(Meteor.user(), "<-- TRACKER"); //never re-runs even when I log in and out
    });
  }
   @observable userId = Meteor.userId(); //stays null even when I login and out

  @observable user = Meteor.user();  //stays null even when I login and out

}

const userStore = new UserStore();
export default userStore;

Any help, idea’s on this would be greatly appreciated!!

One more issue I’ve run into:

If I manually set my user property and then try to get the value, I get the following:
{$mobx: ObservableObjectAdministration$$1} {$mobx: ObservableObjectAdministration$$1}

instead of the object I was expecting:
{_id: "8M7m9CyBGzzceQpnh", emails: Array(1), profile: {…}, _version: 3}

Version 4.x of Mobx returns a $mobx object and version 5.x returns a proxy

Why is this?

Thanks.