Skip to main content

Stores

Stores are the heart of the Triple. They are responsible for maintaining the state of the application.

Maintaining the State with RxNotifier#

ValueNotifier is an implementation of ChangeNotifier and is present in the entire ecosystem of Flutter, from ScrollController to TabController.

Using the ChangeNotifier API means reusing everything that already exists on Flutter.

The ValueNotifier used in this Store is extended by the library rx_notifier which brings the possibility of applying functional reactive programming (TFRP), listening to changes on their values ​​in such a transparent way as MobX does.

class Counter extends Store<int> {
    Counter() : super(0);
    Future<void> increment() async {        setLoading(true);
        await Future.delayed(Duration(seconds: 1));
        int value = state + 1;        if(value < 5) {            update(value);        } else {            setError(Exception('Error: state can\'t be > 4'));        }        setLoading(false);    }}

Our selectors (selectState, selectError, and selectBool) now will be ValueListenable that can be listened separately using .addListener() or in the Widget Tree with AnimatedBuilder, both from Flutter:


store.selectError.addListener(() => print(store.state));
...
Widget builder(BuildContext context){    return AnimatedBuilder(        animation: store.selectState,        builder: (_, __, ___) => Text(store.state);    );}

Or listen to reactions transparently using the rxObserver or in the widget tree with the RxBuilder:


/// CoderxObserver(() => print(store.state));
/// Widget Widget builder(BuildContext context){    context.select(() => store.state);    ...}
/// BuildersWidget builder(BuildContext context){    return RxBuilder(        builder: (_) => Text(store.state),    );}

For more information about the extension read the documentation for rx_notifier

IMPORTANT: You can also continue to use the Triple (observer, ScopedBuilder and TripleBuilder);