Observable

📖 1. Теория

Observable делает объект реактивным - MobX автоматически отслеживает все изменения.

Основные концепции

• Observable объекты автоматически отслеживаются
• Любые изменения триггерят зависимые reactions
• Работает с объектами, массивами, Map, Set

Как создать Observable

import { observable, makeAutoObservable } from 'mobx';

const store = observable({
    count: 0,
    user: { name: "", email: "" }
});

class Store {
    count = 0;
    
    constructor() {
        makeAutoObservable(this);
    }
}

Важно: изменения через action

В strict mode все изменения требуют action или runInAction:

import { runInAction } from 'mobx';

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

Типы Observable

• observable.object() - объекты
• observable.array() - массивы
• observable.map() - Map
• observable.set() - Set
• observable.box() - примитивы

---

💻 2. Практика

Посмотрите как работает отслеживание изменений:

Observable - автоматическое отслеживание

const store = observable({
  count: 0,
  user: {
      name: "",
      email: ""
  }
});

autorun(() => {
  console.log(`Count: ${store.count}`);
  console.log(`User: ${store.user.name}`);
});

console.log('=== Изменение count ===');
runInAction(() => {
  store.count = 5;
});

console.log('\n=== Изменение user.name ===');
runInAction(() => {
  store.user.name = "Дима";
});

console.log('\n=== Изменение обоих ===');
runInAction(() => {
  store.count = 10;
  store.user.name = "Алиса";
});

Обратите внимание: autorun срабатывает при каждом изменении отслеживаемых observables!

---

🎯 3. Проверьте себя

Тест: Observable

1 / 5

Что делает observable с объектом?

A.Замораживает его

B.Делает реактивным - отслеживает изменения

C.Копирует объект

D.Удаляет методы

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

---

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

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

7 карточек

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

📝 Как создать Observable объект?▶

📝 Требуются ли actions для изменения observable?▶

📝 Типы Observable в MobX?▶

📝 Когда срабатывают reactions при изменении observable?▶

📝 Что делает makeAutoObservable?▶

📝 Разница между observable() и makeObservable()?▶

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

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

---

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

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

• ✅ Понимаете что такое Observable
• ✅ Знаете как создавать реактивные объекты
• ✅ Умеете работать с разными типами Observable
• ✅ Прошли тест на понимание
• ✅ Получили карточки для Anki

Следующий шаг: изучите Computed - вычисляемые значения! 🚀