I'm new to mobx. I was wondering why I'm getting ObservableObjectAdministration when I call the puted getServerUrls() function instead of the object.

Below is my store.

import { observable, puted } from 'mobx';
import { ServerNames } from 'master-server-urls';

class ServerNamesStores {

  @observable ServerNameUrls = {};
  @puted get getServerUrls() {
    console.log('@puted get getServerUrls()',  this.ServerNameUrls);
    return this.ServerNameUrls;
  }

  constructor() {
    const overrideServer = {
      "medicontentServer": ""
    }
    const newServerNames = Object.assign({}, ServerNames, overrideServer);
    this.ServerNameUrls = newServerNames;
  }

}

const serverNamesStores = new ServerNamesStores();

export default serverNamesStores;
export { ServerNamesStores };

and below is my App.js

import React, { Component } from 'react';
import { observer } from 'mobx-react';
import ServerNamesStores from './Stores/ServerNamesStores'
import logo from './logo.svg';
import './App.scss';

@observer
class App extends Component {

  constructor(props) {
    super(props)
    const { ServerNameUrls, getServerUrls } = ServerNamesStores
    console.log('ServerNameUrls', ServerNameUrls);
    console.log('1. getServerUrls', getServerUrls);
    console.log('2. getServerUrls', JSON.stringify(getServerUrls));
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Wele to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

Accessing the property works great. The code below works fine and will show the property value for ServerNameUrls.webServer

const { ServerNameUrls, getServerUrls } = ServerNamesStores
console.log('ServerNameUrls', ServerNameUrls.webServer)

I'm new to mobx. I was wondering why I'm getting ObservableObjectAdministration when I call the puted getServerUrls() function instead of the object.

Below is my store.

import { observable, puted } from 'mobx';
import { ServerNames } from 'master-server-urls';

class ServerNamesStores {

  @observable ServerNameUrls = {};
  @puted get getServerUrls() {
    console.log('@puted get getServerUrls()',  this.ServerNameUrls);
    return this.ServerNameUrls;
  }

  constructor() {
    const overrideServer = {
      "medicontentServer": "https://mediaserver.example."
    }
    const newServerNames = Object.assign({}, ServerNames, overrideServer);
    this.ServerNameUrls = newServerNames;
  }

}

const serverNamesStores = new ServerNamesStores();

export default serverNamesStores;
export { ServerNamesStores };

and below is my App.js

import React, { Component } from 'react';
import { observer } from 'mobx-react';
import ServerNamesStores from './Stores/ServerNamesStores'
import logo from './logo.svg';
import './App.scss';

@observer
class App extends Component {

  constructor(props) {
    super(props)
    const { ServerNameUrls, getServerUrls } = ServerNamesStores
    console.log('ServerNameUrls', ServerNameUrls);
    console.log('1. getServerUrls', getServerUrls);
    console.log('2. getServerUrls', JSON.stringify(getServerUrls));
  }

  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Wele to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

Accessing the property works great. The code below works fine and will show the property value for ServerNameUrls.webServer

const { ServerNameUrls, getServerUrls } = ServerNamesStores
console.log('ServerNameUrls', ServerNameUrls.webServer)

• javascript
• reactjs
• mobx
• mobx-react

• Thank you Pierre for editing it. :) – devwannabe Commented Apr 4, 2017 at 2:37

1 Answer 1

I fixed it by adding the code below :)

import { toJS } from 'mobx';

and then on the usage

console.log('getServerUrls output', toJS(getServerUrls));

More info on MobX website