Get State from mobx store react js

Question

I am just learning React JS. I want to get a value that is stored in mobx state in my application. But not getting any idea how to get mobx state in functional component.

const user_id = observer(({ GlobalStore }) =>
    console.log(GlobalStore.user_id)
); // I just need the user ID.

This is the full code:

import { observer } from "mobx-react";
import Store from "../mobx/Store";

export const user_id = observer(({ GlobalStore }) =>
    console.log(GlobalStore)
);

console.log(user_id);

And my Store.js file is as below:

 import { observable, action, makeObservable, autorun } from "mobx"; class GlobalStore { site_title = "ABCD"; app_code = null; user_id = null; constructor() { makeObservable(this, { site_title: observable, app_code: observable, user_id: observable, update_title: action.bound, update_appcode: action.bound, update_userid: action.bound, }); } update_title(title) { this.site_title = title; } update_appcode(code) { this.app_code = code; } update_userid(id) { this.user_id = id; } } const Store = new GlobalStore(); autorun(() => { console.log("System Checking... OK") }) export default Store;

Answer 1

Because your store is a singleton you can just import it anywhere and access any field or method.

import { observer } from 'mobx-react';

import Store from './Store';

const SomeComponent = observer(() => {
  return <div>user_id: {Store.user_id}</div>;
});

I've made example on Codesandbox

Answer 2

in Mobx Update Version We have autoObservable

import makeAutoObservable from Mobx and use it like i have used check out code sandbox

-> here You can Check

code for Your mobx Store

import { makeAutoObservable, runInAction } from 'mobx'; // import this
    
    class GlobalStore {
      user_id = 'id here';
    
      constructor() {
        makeAutoObservable(this); // call autuobservable inside constractor
      }
    
      update_userid(id) {
        this.user_id = id;
      }
    }
    
    const Store = new GlobalStore();
    
    export default Store;

and here you can access your user id like this in app component or where else you want

import { observer } from 'mobx-react';
import React, { useEffect } from 'react';
import Store from './Store';
import './styles.css';
    const App = observer(() => {
      useEffect(() => {
        setTimeout(() => {
          Store.update_userid('new_id_111');
        }, 3000);
      }, []);
    
      return (
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
          <div>user_id: {Store.user_id}</div>
        </div>
      );
    });
    export default App;

reference code sandbox link

Code Sandbox Link

it may solve your problem