Как мутируется state в MobX?

В MobX state мутируется напрямую — обычным присваиванием внутри action; MobX через Proxy перехватывает изменение и запускает реакции. Состояние мутабельное (в отличие от иммутабельного Redux).

Прямая мутация

В MobX состояние меняют прямым присваиванием, а не созданием нового объекта:

import { makeAutoObservable } from 'mobx';

class Store {
  count = 0;
  user = { name: 'Ann' };
  items = [];

  constructor() { makeAutoObservable(this); }

  increment() {
    this.count++;              // прямая мутация
  }
  rename(name) {
    this.user.name = name;     // мутация вложенного
  }
  addItem(item) {
    this.items.push(item);     // мутация массива
  }
}

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

MobX перехватывает запись свойств: у классов с makeAutoObservable — через геттеры/сеттеры на экземпляре, у observable({}), массивов и Map — через Proxy. При мутации Proxy:

1. Применяет изменение.
2. Запускает реакции — пересчёт computed, перерисовку observer-компонентов.

Через actions

Изменения делают в actions (в строгом режиме enforceActions — обязательно):

@action increment() { this.count++; } // или makeObservable(this, { increment: action })

Это группирует изменения и делает поток предсказуемым.

MobX против Redux

• MobX — мутабельное состояние, прямое изменение (this.count++).
• Redux — иммутабельное, новый объект ({ ...state, count: state.count + 1 }).

Коротко для собеседования

В MobX state мутируется напрямую — обычным присваиванием (this.count++, this.items.push()), обычно внутри action. MobX через Proxy перехватывает мутацию и запускает реакции (пересчёт computed, перерисовку observer). Состояние мутабельное — в отличие от иммутабельного Redux (где создают новый объект).