Header.js

import { observable, useStrict, action, runInAction } from 'mobx'
import $ from 'jquery'

useStrict(true)

class HeaderStore {
  @observable data = []
  @observable loading = true
  @observable error = null

  @action addRepo(repo) {
    this.data.push(repo)
  }

  @action loadHeaderData() {
    $.getJSON('/regional_design/repos.json').then(
      value => {
        runInAction("update state after fetching data", () => {
          this.data = value
          this.loading = false
        })
      },
      error => {
        runInAction("error", () => {
          this.error = error.statusText
          this.loading = false
        })
    })
  }
}

export default new HeaderStore()