Store

Context is designed to share data that can be considered “global” for a tree of React components. But for complex data, we recommend using the concept of data store from MobX.

When to Use a Store

Actually, global data can be kept in a context but there are some reasons using store is a better idea.

Complex Logic for Updating Value

If your global data are read-only, using context is fine. But if that data can be changed by some components using some complex logics. Grouping these logic together is a good idea.

import { observable, action } from 'mobx'
import { uniqueId } from 'lodash'

export default class ErrorStore {
  @observable
  errors = []

  expired = 5000

  @action
  addError(error) {
    const id = uniqueId()

    this.errors.push({
      ...error,
      id,
    })

    setTimeout(() => {
      this.removeError(id)
    }, this.expired)
  }

  @action
  removeError(id) {
    this.errors = this.errors.filter(error => error.id !== id)
  }
}

Isolating Data for Large Scale App

Another good reason is isolating global data into multiple stores will helps your app simpler a lot. You will know which global data the app keeps immediately after seeing the RootStore file.

import UIStore from '@features/_ui/store'
import ErrorStore from '@features/_error/store'
// Import more store here...

export default class RootStore {
  constructor() {
    this.uiStore = new UIStore(this)
    this.errorStore = new ErrorStore(this)

    // Register more store here...
  }
}