Как подписаться на обновление стейта в MobX Flutter?

В MobX Flutter вы можете подписаться на обновление стейта, используя аннотацию @observse и класс Reaction.

@observable - это аннотация, которую вы можете использовать для пометки переменной как наблюдаемой переменной, то есть переменной, за изменениями которой стоит следить. Наблюдаемая переменная должна быть определена в классе состояния (state class) и должна иметь тип Observable. В случае MobX Flutter это может быть Observable, ObservableList, ObservableSet и другие.

Для создания реакции на изменение наблюдаемой переменной, вы можете использовать класс Reaction. Reaction - это класс из пакета MobX Flutter, который позволяет реагировать на изменение наблюдаемых переменных и выполнять определенный код или вызвать метод при каждом изменении.

Вот пример того, как вы можете подписаться на обновление стейта с использованием MobX Flutter:

1. Включите зависимости MobX Flutter в вашем файле pubspec.yaml:

dependencies:
  mobx: ^1.2.1
  mobx_flutter: ^1.2.0

2. Создайте класс состояния (state class) с использованием MobX:

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++;
  }
}

3. Создайте виджет, который будет использовать класс состояния:

import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';

import 'counter_store.dart';

class CounterWidget extends StatelessWidget {
  final CounterStore counterStore = CounterStore();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MobX Flutter'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Observer(
              builder: (_) => Text(
                'Count: ${counterStore.count}',
                style: TextStyle(fontSize: 24),
              ),
            ),
            SizedBox(height: 16),
            RaisedButton(
              onPressed: counterStore.increment,
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

4. В этом примере мы используем виджет Observer из пакета flutter_mobx, чтобы обернуть виджет, который должен быть перерисован при изменении значения счетчика. Наши Text и RaisedButton виджеты помещены внутри Observer, что позволяет следить за изменениями переменной count и обновлять виджеты при каждом изменении.

При каждом нажатии на кнопку "Increment" значение счетчика будет увеличиваться на 1, и виджет Text будет автоматически перерисовываться с новым значением count.

Таким образом, при использовании MobX Flutter вы можете легко подписаться на обновление стейта с помощью аннотации @observable и класса Observer, что позволяет создавать реактивные приложения и обновлять пользовательский интерфейс только при изменении данных.