rx_notifier

rx_notifier

The ValueNotifier is a simple, native form of Flutter reactivity. This extension aims to transparently apply functional reactive programming (TFRP).

• Read the documentation.

Implementing the Atomic State.

It is possible to implement Recoil Atoms pattern using RxNotifier. This pattern consists of the state being an object with its own reactivity.

Motivation

Developers still have trouble understanding state management in Flutter. We had this conclusion after several research in the community fluttering and also in partner companies. Atomic State is a noob-friendly state management approuch at the same time that maintains a reliable structure thinking of scalability and maintenance.

More details, read this Medium article on the subject.

Rules

We must take into account some architectural limits to execute this Approach:

1. All states must be an atom(RxNotifier instance).
2. All actions must be an atom(RxNotifier instance).
3. Business rules must be created in the Reducer and not in the Atom.

Layers

We will have 3 main layers, they are: Atoms, Reducers and Views;

Note that the View (which is the presentation layer) does not know about the Reducer (which is the business rule execution layer). These two layers share atoms that in turn represent the state and the dispatch of state actions.

In Flutter these layers translate to Atom(RxNotifier), Reducer(RxReducer) and View(Widget):

Atoms (RxNotifier)

Atom represent the reactive state of an application. Each atom has its own reactivity.

// atoms
final productsState = <Product>[].asRx();
final productTextFilterState = RxNotifier<String>('');

// computed
List<Product> get filteredProductsState {
     if(productTextFilterState.value.isEmpty()){
         return productsState.value;
     }

     return productsState.where(
         (p) => p.title.contains(productTextFilterState.value),
     );
}

// actions
final selectedProductState = RxNotifier<Product?>(null);
final fetchProductsState = RxNotifier(null);

Reducer (RxReducer)

In this architecture you are forced to split state management of business rules, which may seem strange at first when seen that we are always managing and reducing state in the same layer as BLoC and ChangeNotifier for example.
However, dividing state management and business rule execution will help us distribute multiple states to the same widget, and these multiple states will not need to be concatenated beforehand through a facade or proxy.

The layer responsible for making business decisions will be called Reducer:

class ProductReducer extends RxReducer {

    ProductReducer(){
        on(() => [fetchProductsState.action], _fetchProducts);
        on(() => [selectedProductState.value], _selectProduct);
    }

    void _fetchProducts(){
        ...
    }

    void _selectProduct(){
        ...
    }
}

Reducers can register methods/functions that listen to the reactivity of an Atom(RxNotifier).

View (Widget)

Any widget can listen to changes of one or many atoms, provided they have the RxRoot widget as their ancestor. For more details about RxRoot, Read the documentation.

The context.select() method is added via Extension to BuildContext and can be called on any type of Widget, StatefulWidget and StatelessWidget.

...
Widget build(BuildContext context){
     final products = context.select(
                 () => filteredProductsState.value
              );
     ...
}

Examples

Flutter projects using RxNotifier

Trivial Counter.

Shop Cart.