Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке action у MobX?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

## Просте визначення

> `action` у MobX - це **функція, яка змінює спостережувані (observable) дані**.
>
> MobX відстежує всі зміни, що відбуваються *всередині action*, і оновлює залежності (компоненти, обчислення) **одним пакетом** - без зайвих реакцій між проміжними кроками.

---

## Чому action існує

MobX розділяє два типи коду:

| Тип | Призначення |
|---|---|
| **Reactive (реактивний)** | обчислює або відображає дані (наприклад, компонент React чи `computed`) |
| **Active (активний)** | *змінює* дані (наприклад, подія кліку, API-запит тощо) |

Action - це межа, де **відбуваються зміни в observable-стані**.
Вони забезпечують:

1. **передбачуваність** (усі зміни контролюються);
2. **оптимізацію** (оновлення групуються);
3. **чисту реактивність** (немає реакцій "посередині" обчислень).

---

## Приклад 1 - без action

```javascript
import { makeObservable, observable } from 'mobx'

class Counter {
  count = 0

constructor() {
    makeObservable(this, {
      count: observable,
    })
  }

increment() {
    this.count++ // MobX все одно працює, але не оптимально
  }
}
```

Тут `increment()` змінює стан, але MobX не знає, що це *контрольована дія*.

---

## Приклад 2 - з action

```javascript
import { makeObservable, observable, action } from 'mobx'

class Counter {
  count = 0

constructor() {
    makeObservable(this, {
      count: observable,
      increment: action, // оголошуємо як action
    })
  }

increment() {
    this.count++
  }
}
```

Тепер MobX знає, що `increment()` - це **action**, і:

- не запускає реакції (оновлення UI) *після кожної мутації*;
- відкладає реакцію до кінця action;
- групує всі зміни в **один батч** → менше перерендерів і обчислень.

---

## Автоматичне визначення action

Якщо ти використовуєш сучасний MobX (через `makeAutoObservable`),
він **сам позначає методи як** `action`, а геттери - як `computed`:

```javascript
import { makeAutoObservable } from 'mobx'

class TodoStore {
  todos = []

constructor() {
    makeAutoObservable(this) // все автоматично
  }

addTodo(text) {
    this.todos.push({ text, done: false }) // action
  }

get completed() {
    return this.todos.filter(t => t.done) // computed
  }
}
```

---

## Чому це важливо

Припустимо, ти оновлюєш кілька властивостей поспіль:

```javascript
userStore.updateProfile = action(() => {
  userStore.name = 'Alex'
  userStore.age = 25
  userStore.email = 'alex@example.com'
})
```

Без `action` MobX викликав би реакцію після **кожного присвоєння** → до трьох перерендерів поспіль.
З `action` MobX робить це **одним пакетом**, викликаючи реакцію лише один раз - після завершення блоку.

---

## Типи action

| Тип | Опис |
|---|---|
| `action(fn)` | вручну огортає функцію в action |
| `@action` **(декоратор)** | старий синтаксис для класів |
| `makeObservable(..., { method: action })` | явне оголошення |
| `makeAutoObservable()` | автоматичне визначення методів як action |

---

## Приклад 3 - явне оголошення поза класом

```javascript
import { observable, action } from 'mobx'

const state = observable({
  count: 0,
  inc: action(function () {
    this.count++
  }),
})
```

---

## Під капотом

Action:

1. Позначає початок "пакета змін" (`startBatch`);
2. Вимикає тимчасові реакції;
3. Виконує зміни в `observable`;
4. Після завершення - **одним разом сповіщає всі залежні реакції** (`endBatch`).

Саме це робить MobX **надефективним**:
UI не перерендерюється при кожній дрібниці - лише коли вся дія завершена.

---

## Підсумок

| Що робить | Приклад |
|---|---|
| Огортає зміну стану | `increment = action(() => this.count++)` |
| Групує оновлення | Один батч замість кількох реакцій |
| Підвищує продуктивність | Менше перерендерів |
| Робить код передбачуваним | Усі зміни проходять через actions |
| Автоматично створюється при `makeAutoObservable` | Так |

---

## Коротко

> `action` - це "офіційне місце", де ти змінюєш `observable`-дані.
> Воно робить зміни **контрольованими**, **батчованими** і **передбачуваними**,
> забезпечуючи чисту реактивність і високу продуктивність.

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати575 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.