`autorun` isn't triggered on state mutation. about mobx.dart

[amondnet]

Hi, @wiseaidev

At the heart of MobX are observables. The reactivity occurs when there is a reaction that depends on an observable. When the observables change, the associated reactions will re-trigger automatically. Yes, automatically, without any manual wiring. The way you link a reaction to an observable is by using it (reading its value) inside the tracking function.

https://mobx.netlify.app/guides/when-does-mobx-react#rules-of-reactivity
https://mobx.netlify.app/api/observers#reactionbuilder-widget

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: ReactionBuilder(
        builder: (context) {
          return reaction(
          (_) =>  context.read<AppState>().currentPage , (v) => print('New value: $v')

            },
          );
        },
        child: Observer(
          name: "CurrentScreen",
          builder: (context) {
            switch (context.read<AppState>().currentPage) {
              case AppPage.splash:
                return const MySplashPage(title: "Splash Page");
              case AppPage.home:
                return const MySplashPage(title: "Home Page");
              case AppPage.login:
                return const Placeholder();
            }
          },
        ),
      ),
    );
  }
}

https://mobx.netlify.app/api/reaction#autorun

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: ReactionBuilder(
        builder: (context) {
          return autorun(
            (_) {
              print("A reaction has been triggered! ${context.read<AppState>().currentPage}");
            },
          );
        },
        child: Observer(
          name: "CurrentScreen",
          builder: (context) {
            switch (context.read<AppState>().currentPage) {
              case AppPage.splash:
                return const MySplashPage(title: "Splash Page");
              case AppPage.home:
                return const MySplashPage(title: "Home Page");
              case AppPage.login:
                return const Placeholder();
            }
          },
        ),
      ),
    );
  }
}

Installing build/app/outputs/flutter-apk/app-debug.apk...
Debug service listening on ws://127.0.0.1:44217/gaOdK7mROOQ=/ws
Syncing files to device sdk gphone64 x86 64...
I/x_autorun_issue( 7449): Compiler allocated 4533KB to compile void android.view.ViewRootImpl.performTraversals()
I/flutter ( 7449): A reaction has been triggered! AppPage.splash
E/SurfaceSyncer( 7449): Failed to find sync for id=0
W/Parcel  ( 7449): Expecting binder but got null!
I/flutter ( 7449): Am action has been fired!
I/flutter ( 7449): A reaction has been triggered! AppPage.home
D/EGL_emulation( 7449): app_time_stats: avg=14432.15ms min=18.67ms max=28845.63ms count=2

[wiseaidev]

Hey @amondnet,

Thanks for the response. I will try your suggestion and get back in an hour or so cause I am AFK at the moment(using gh mobile).

[amondnet]

@wiseaidev Please reopen if you have more questions.

[wiseaidev]

Hey @amondnet,

I have just tried both examples, but the problem still exists.

I think you are using an older version of flutter. My specs:

Therefore, I am going to reopen the issue (Oh wait! I can't do it :-(. I need karma or something).

[wiseaidev]

Hey @amondnet,

After lil speculation, I found that the problem exists on SDK > 2.18 (but probably on SDK >2.17 as well):

I tried SDK 2.16.8, and the problem is gone. So, it seems like the issue exists in the newer versions (SDK > 2.17).