How to watch a specific property of a state like mobx @observabe

[TrustOkoroego]

I am migrating from Mobx to riverpod, but I seem not to find a way to implement the logic of mobx observable properties in riverpod. So basically in mobx I could have this:

`
@observable
String email;

@observable
String phone;
`

Then I could observe any of the properties independently.

Observer( builder: (_) => Text( '${registration.email}' ) )

So if email value changes in the store,only the widget observing email property will be rebuilt, not the widgets listening to the phone property. In riverpod you watch the entire state, and this will cause all the widgets to be rebuilt even when the actual value in the state being used by the widget did not change.

Is there a way to prevent the entire widget from rebuilding?

[julienlebren]

🖐

You just need to create one provider per value watched, as mentioned in the doc

final emailProvider = Provider<String>((ref) {
  final store = ref.watch(storeProvider);
  return store.email;
});

final phoneProvider = Provider<String>((ref) {
  final store = ref.watch(storeProvider);
  return store.phone;
});

Then your widgets are:

class EmailWidget extends ConsumerWidget {
  const EmailWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final email = watch(emailProvider);
    return Text(email);
  }
}

class PhoneWidget extends ConsumerWidget {
  const PhoneWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final phone = watch(phoneProvider);
    return Text(phone);
  }
}

Don't be afraid to create a lot of providers to watch each value of your store, that's the way riverpod works.

[TrustOkoroego]

Thanks julienlebren for your feedback!

Don't be afraid to create a lot of providers to watch each value of your store, that's the way riverpod works.

This is what I am trying to avoid. With the scale of my project, this will quickly get messy. I will stick to Mobx and probably use riverpod for DI.

[iamarnas]

It's on the way #511