Actions

📖 1. Теория

Actions используются для модификации observable состояния в MobX.

Зачем нужны actions?

1. Транзакции - все изменения группируются
2. Оптимизация - reactions запускаются только один раз
3. Безопасность - в strict mode обязательны

action vs runInAction

action - для методов класса:

class Store {
    increment() {
        this.count++;
    }
}

runInAction - для встроенного кода:

runInAction(() => {
    store.count++;
});

Главное правило

action работает только ДО первого await!

После await нужен runInAction или используйте flow.

---

💻 2. Практика

Попробуйте запустить код:

Actions - транзакции

class CounterStore {
  count = 0;
  name = '';
  
  constructor() {
      makeAutoObservable(this);
  }
  
  increment() {
      this.count++;
      this.name = `Count: ${this.count}`;
  }
}

const store = new CounterStore();

let reactionCount = 0;
reaction(
  () => ({count: store.count, name: store.name}),
  () => {
      reactionCount++;
      console.log(`Reaction #${reactionCount}`);
  }
);

console.log('=== БЕЗ action ===');
runInAction(() => {
  store.count++;
});
runInAction(() => {
  store.name = 'Test';
});

console.log('\n=== С action (группировка) ===');
store.increment();

console.log(`\nВсего срабатываний reaction: ${reactionCount}`);

Обратите внимание: с action реакция сработает 1 раз вместо 2!

---

🎯 3. Мини-тест

Проверьте понимание:

Тест: Actions в MobX

1 / 5

Что произойдет если изменить observable вне action в strict mode?

A.Всё будет работать нормально

B.Выбросится ошибка

C.Изменение игнорируется

D.Автоматически обернется в action

📊 Прогресс: 0 / 5 вопросов

---

🎴 4. Anki карточки

Готовые карточки для запоминания:

Карточки для Anki

8 карточек

📝 Что такое action в MobX?▶

📝 Когда использовать action, а когда runInAction?▶

📝 Как работает action с async/await?▶

📝 Что такое flow в MobX?▶

📝 Зачем нужны транзакции (batching) в action?▶

📝 Что делает makeAutoObservable с методами класса?▶

📝 Можно ли вкладывать actions друг в друга?▶

📝 Что такое enforceActions в MobX?▶

💡 Как импортировать в Anki:

1. Нажмите "Скачать для Anki"
2. В Anki: Файл → Импортировать
3. Выберите скачанный .csv файл
4. Тип: "Базовый (с обратной карточкой)"
5. Разделитель полей: Запятая
6. Импортировать!

---

📊 Результат обучения

После изучения этой статьи вы:

• ✅ Понимаете зачем нужны actions
• ✅ Знаете разницу между action и runInAction
• ✅ Умеете работать с async операциями
• ✅ Прошли тест и проверили знания
• ✅ Импортировали карточки в Anki для запоминания

Следующий шаг: повторяйте карточки в Anki каждый день! 🧠