⭐⭐⭐⭐⭐ Используем mobx для state management в Flutter приложении.

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

1. Установка зависимостей

Добавьте следующие зависимости в pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  mobx: ^2.0.6
  flutter_mobx: ^2.0.6

dev_dependencies:
  build_runner: ^2.1.5
  mobx_codegen: ^2.0.5

Запустите команду flutter pub get, чтобы установить пакеты.

2. Создайте Store

MobX использует "Stores" для управления состоянием. Store — это класс, который содержит реактивное состояние и логику.

Создайте класс Store с использованием MobX: Создайте файл, например, counter_store.dart:\

import 'package:mobx/mobx.dart';

part 'counter_store.g.dart';

class CounterStore = _CounterStore with _$CounterStore;

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

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

Аннотация @observable помечает переменные, которые будут реактивными, а @action используется для функций, которые изменяют эти реактивные переменные.

Сгенерируйте код Store: Запустите следующую команду для генерации файла *.g.dart:

flutter pub run build_runner build

Это сгенерирует файл counter_store.g.dart, где MobX будет управлять логикой состояния.

3. Интеграция Store с интерфейсом

Теперь вы можете подключить store к интерфейсу с использованием виджета Observer из пакета flutter_mobx. Виджет Observer слушает изменения в состоянии и автоматически перестраивает интерфейс.

Пример использования store в вашем интерфейсе:

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('MobX Counter'),
      ),
      body: Center(
        child: Observer(
          builder: (_) => Text(
            '${counterStore.counter}',
            style: TextStyle(fontSize: 40),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counterStore.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

Здесь Observer автоматически перестраивает виджет, когда counterStore.counter изменяется.

Использование MobX с чистой архитектурой

Чтобы следовать принципам чистой архитектуры, рекомендуется:

Отделить бизнес-логику от UI: держите ваши MobX stores в доменном или прикладном слое, отдельно от слоя представления.
Инжектируйте stores через внедрение зависимостей или сервис локаторы, такие как get_it или injectable.

Пример:

Создайте store в доменном слое и затем инжектируйте его в слой представления, вместо того, чтобы создавать store напрямую в UI.

5. Тестирование Store

MobX stores легко тестировать. Например, вы можете протестировать функциональность следующим образом:

void main() {
  final counterStore = CounterStore();

  test('should increment counter', () {
    counterStore.increment();
    expect(counterStore.counter, 1);
  });
}

Заключение

MobX — это мощный и гибкий инструмент для управления состоянием, который хорошо вписывается в архитектуру с использованием реактивного программирования. Размещайте бизнес-логику в доменном/прикладном слое и используйте виджеты Observer для реактивного обновления интерфейса.

Посмотреть подходящие вакансии для Flutter-разработчика можно тут!

Поделиться этим постом