MobX React example

mobx-example.js

import React from 'react';
import { observable, computed, action } from 'mobx';
import { observer } from 'mobx-react';

class UserStore {
  @observable firstName;
  @observable lastName;

  @observable isLoading = false;
  @observable error;

  @computed
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }

  @action
  fetchUserData = async () => {
    this.isLoading = true;

    try {
      const res = await fetch('/api/user');
      const data = await res.json();

      this.firstName = data.firstName;
      this.lastName = data.lastName;
    } catch (e) {
      this.error = e.message;
    }

    this.isLoading = false;
  };
}

@observer
class UserComponent extends React.Component {
  constructor(props) {
    super(props);
    this.store = new UserStore();
  }

  componentDidMount() {
    this.store.fetchUserData();
  }

  render() {
    return (
      <div>
        {this.store.error && (
          <div>Error loading user: ({this.store.error})</div>
        )}

        {this.store.isLoading ? (
          <div>Loading user...</div>
        ) : (
          <div>User: {this.store.fullName}</div>
        )}
      </div>
    );
  }
}