Есть ли у вас опыт работы с MobX во Flutter?

«Есть ли у вас опыт работы с MobX во Flutter?» — вопрос из категории State Management, который задают на 29% собеседований Flutter Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Да, я использовал MobX в нескольких Flutter-проектах для управления состоянием. Это библиотека, основанная на реактивном программировании, где изменения состояния автоматически обновляют зависящие от него виджеты.

Ключевые концепции, которые я применял:

  • Observables: Обёртка для данных, за изменениями которых следят реакции.
  • Actions: Методы, которые изменяют observables. MobX гарантирует, что все изменения происходят внутри них.
  • Reactions: Автоматические отклики на изменения observables, такие как перестройка виджета (Observer).

Пример хранилища (Store):

import 'package:mobx/mobx.dart';

part 'counter_store.g.dart';

class CounterStore = _CounterStore with _$CounterStore;

abstract class _CounterStore with Store {
  @observable
  int count = 0;

  @action
  void increment() {
    count++;
  }

  @computed
  bool get isEven => count % 2 == 0;
}

Виджет с использованием flutter_mobx:

import 'package:flutter_mobx/flutter_mobx.dart';

class CounterPage extends StatelessWidget {
  final CounterStore store = CounterStore();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Observer(
          builder: (_) => Text('Count: ${store.count}, Even: ${store.isEven}'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: store.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

Мой опыт и выводы:

  • Плюсы: Минимальный шаблонный код с кодогенерацией (mobx_codegen), отличная производительность за счёт точечных обновлений и интуитивная модель разработки.
  • Использовал для средних проектов, где требовалась чёткая сепарация бизнес-логики (в сторах) и UI. Комбинация Observable + Observer делает код очень читаемым и предсказуемым.