I'm new to mobx. I was wondering why I'm getting ObservableObjectAdministration when I call the computed getServerUrls() function instead of the object.
Below is my store.
import { observable, computed } from 'mobx';
import { ServerNames } from 'master-server-urls';
class ServerNamesStores {
@observable ServerNameUrls = {};
@computed get getServerUrls() {
console.log('@computed get getServerUrls()', this.ServerNameUrls);
return this.ServerNameUrls;
}
constructor() {
const overrideServer = {
"medicontentServer": "https://mediaserver.example.com"
}
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>Welcome 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)
