Налаштування State Management (MobX) для React-застосунку

Настройка State Management (MobX) для React-додатку

MobX використовує реактивне програмування: спостережувані (observable) дані, вичислювані значення (computed) та реакції (autorun, reaction, when). Компоненти, обгорнені в observer, автоматично підписуються на рівно ті спостережувані, які читають при рендері — не більше.

MobX перемагає там, де стан складний, об'єктно-орієнтований або коли потрібно мінімізувати ручну роботу з оптимізації ре-рендерів.

Що входить у роботу

Проектування стор-класів, настройка декораторів або makeObservable/makeAutoObservable, інтеграція з React через mobx-react-lite, реакції та side-ефекти, DevTools, персистентність, тестування сторів.

Встановлення

npm install mobx mobx-react-lite

При використанні TypeScript з декораторами включити у tsconfig.json:

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "useDefineForClassFields": false
  }
}

Стор через makeAutoObservable

Найлаконічніший спосіб — makeAutoObservable. MobX сам визначає, що спостережуване, що вичислюване, що екшен:

import { makeAutoObservable, runInAction } from 'mobx'

class CartStore {
  items: CartItem[] = []
  loading = false
  error: string | null = null

  constructor() {
    makeAutoObservable(this)
  }

  get total() {
    return this.items.reduce((sum, i) => sum + i.price * i.quantity, 0)
  }

  get count() {
    return this.items.reduce((sum, i) => sum + i.quantity, 0)
  }

  addItem(product: Product) {
    const existing = this.items.find((i) => i.id === product.id)
    if (existing) {
      existing.quantity++
    } else {
      this.items.push({ ...product, quantity: 1 })
    }
  }

  async checkout() {
    this.loading = true
    this.error = null
    try {
      await api.post('/orders', { items: this.items })
      runInAction(() => {
        this.items = []
        this.loading = false
      })
    } catch (err) {
      runInAction(() => {
        this.error = err instanceof Error ? err.message : 'Помилка оформлення'
        this.loading = false
      })
    }
  }
}

export const cartStore = new CartStore()

Терміни

Базова настройка MobX — 1–2 години. Настройка кількох взаємозалежних сторів — 2–3 години. Складний граф спостережуваних — 1 день.