# Flutter Mobx

- https://mobx.pub

## pubspec.yaml


<code dart>
dependencies:
  mobx: ^0.3.8
  flutter_mobx: ^0.3.3
  provider: ^3.1.0

dev_dependencies:
  build_runner: ^1.3.1
  mobx_codegen: ^0.3.9
</code>

## 명령어

<code>
flutter packages pub run build_runner build
flutter packages pub run build_runner watch
</code>


## count_store.dart

<code>
import 'package:mobx/mobx.dart';

// Include generated file
part 'counter_store.g.dart';

// This is the class used by rest of your codebase
class CounterStore = _CounterStore with _$CounterStore;

// The store-class
abstract class _CounterStore with Store {
  @observable
  int value = 0;

  @action
  void increment() {
    value++;
  }
}
</code>

## App

<code>
import 'store/counter_store.dart';
import 'store/search_store.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
        providers: [
          Provider<CounterStore>(builder: (_) => CounterStore()),
          Provider<SearchStore>(builder: (_) => SearchStore()),
        ],
        child: MaterialApp(
          title: 'Flutter Demo',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primarySwatch: Colors.green,
            backgroundColor: Colors.grey,
          ),
          home: HomeScreen(),
          // home: SearchResultScreen(),
        ));
  }
}
</code>

## Widget

<code dart>
final searchStore = Provider.of<SearchStore>(context);

Observer(
  builder: (context) => Text('${searchStore.state}'),
),

onPressed: () {
  searchStore.search('FIX ME!!!!');
},
</code>

## Mobx Reaction

- https://stackoverflow.com/questions/56412277/how-to-pop-screen-using-mobx-in-flutter


<code dart>
final List<ReactionDisposer> _disposers = [];
bool _pushed = false;

@override
void dispose() {
  _disposers.forEach((disposer) => disposer());
  super.dispose();
}

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  searchStore = Provider.of<SearchStore>(context);

  _disposers.add(
    autorun(
      (_) {
        // print('${searchStore.state}');
      },
    ),
  );
  
  _disposers.add(
    reaction(
      (_) => searchStore.finished,
      (_) {
        print('## reaction called');
        if (_pushed == false) {
          _pushed = true;
          print('pushed is $_pushed');
          searchStore.setStateInit();
          Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) =>
                    SearchResultScreen(onWillPop: _onWillPop)),
          );
        }
      },
    ),
  );
}
</code>