react mobx - store return Proxy object

Viewed 4821

I have the following state class:

import { observable, action } from 'mobx';
import axios from 'axios';

export default class AppState {
  @observable user;
  @observable pToken;

  constructor() {
    this.user = {};
    this.pToken = localStorage.getItem('pToken');
  }

  async fetchData(query) {

    const body = JSON.stringify({ query, });
    const response = await axios.post('url', body, {
      headers: {
        'Content-Type': 'application/json',
        token: localStorage.getItem('pToken')
      }
    });

    const user = response.data.data.user;
    console.log('Got user', user);
    this.setUser(user);
  }

  @action setUser(user) {
    this.user = user;
  }
}

and in my component:

@inject('store')
@observer
export default class Header extends Component {
    constructor(props) {
        super(props);
        this.store = this.props.store.appState;
    }

    render() {
        const { user } = this.store;
        console.log('store', this.store);

        return (
            <header className='header'>
                User - {user.username}
            </header>
        );
    }
}

Unfortunately, the state user property returns a Proxy object, while the user log shows the user object. Any idea what I'm missing?

enter image description here

1 Answers

Everything is working as intended, MobX v5 relies on proxies under the hood so when you log observable objects it usually shows some internal implementation.

You can use toJS MobX method console.log(toJS(user)) or just destructure user object console.log({ ...user })

toJS docs: https://mobx.js.org/refguide/tojson.html

Related