Library. MobX. Reaction

🧱 Суть

reaction в MobX – это инструмент, который выполняет действие только тогда, когда изменяются конкретные отслеживаемые значения.

Структура:

reaction(
  () => отслеживаемые_значения,
  (новые_значения) => {
    // действие
  }
);

Главная идея: следить за состоянием → реагировать на изменение

📦 Проблема

1. Не всегда нужен полный автоматический отслеживатель

autorun реагирует на всё, что используется внутри функции.
Иногда нужно контролировать конкретные зависимости.

2. Логика состояния попадает в компоненты

Например:

useEffect(() => {
  if (count > cols * rows) {
    setRows(...);
  }
}, [count, cols, rows]);

Компонент начинает отвечать не только за UI, но и за бизнес-логику.

✅ Решение

Использовать reaction внутри store.
Логика остаётся рядом с состоянием и не зависит от React-рендера.

💻 Код

Пример:

reaction(
  () => [this.count, this.grid[0], this.grid[1]],
 
  ([count, cols, rows]) => {
    if (count > cols * rows) {
      this.setGrid([
        cols,
        Math.ceil(count / cols)
      ]);
    }
  }
);

Как работает reaction

reaction состоит из двух частей:

1. Функция отслеживания

() => [
  this.count,
  this.grid[0],
  this.grid[1]
]

MobX смотрит, какие observable значения используются внутри.

Здесь отслеживаются:

count → количество элементов
grid[0] → количество колонок
grid[1] → количество строк

2. Функция реакции

([count, cols, rows]) => {
  if (count > cols * rows) {
    this.setGrid(...);
  }
}

Она запускается только после изменения отслеживаемых значений.

Аналогия с useEffect

React:

useEffect(() => {
  // действие
}, [count, cols, rows]);

MobX:

reaction(
  () => [count, cols, rows],
  () => {
    // действие
  }
);

Главное отличие:

useEffect → живёт в компоненте
reaction → живёт в store

Когда использовать

Подходит:

нужно следить за несколькими значениями состояния
нужно выполнить действие при изменении MobX state
логика относится к данным, а не к UI

Не подходит:

подписки на внешние события

Например:

window.addEventListener(...)

Для этого всё ещё нужен:

useEffect()

🎯 Вывод

reaction следит только за указанными значениями
запускает действие при их изменении
похож на useEffect с зависимостями
отличается тем, что живёт в store, а не компоненте
помогает держать бизнес-логику рядом с состоянием

LETUNOFF DOCS

Навигация