reactive_state

réactif_state

Une solution de gestion réactive de l'état réactif pour le flottement.

Principes

État observable

L'état est tenu dans une ou plusieurs instances de Value ou de classes similaires implémentant ValueNotifier . Ce sont des interfaces de flottement standard que tout le monde connaît de TextEditingController , Animation , etc.

De plus, vous pouvez utiliser ListValue et MapValue pour la création de valeurs List observables et Map qui peuvent vous informer des événements de changement à grain fin (au lieu de la variation de la valeur entière).

Widgets réactifs

AutoBuild reconstruit automatiquement vos widgets lorsqu'un ValueNotifier (ou tout Listenable ) déclenche une notification. Il est similaire à ValueListenableBuilder de Flutter, mais il peut suivre plusieurs dépendances et aussi travailler avec Listenable .

Pas besoin d'appeler addListener / removeListener . get() la valeur directement tandis que AutoBuild s'occupe du suivi de vos dépendances.

Contrairement à InheritedWidget et Provider , vous obtenez un contrôle à grain fin sur ce qui est reconstruit.

Les classes de flottement standard comme TextEditingController et Animation mettent en œuvre ValueListenable et fonctionnent donc bien avec AutoBuild .

État dérivé / calculé

DerivedValue est une valeur observable calculée (dérivée) d'autres valeurs observables.

En outre, ListValue et MapValue fournissent .map() et d'autres opérations pour la création de conteneurs dérivés qui se tiennent au courant par élément.

Moins de passe-partout et d'indirection

Le code résultant est beaucoup plus simple que la même solution dans Bloc ou Redux.

• Pas de flux, pas StreamBuilder , pas de chargement asynchrone de widgets (sauf si vous en avez vraiment besoin).
• Aucun objet d'événement spécial, pas de gestionnaires d'événements avec des instructions Long switch() .

Usage

Remarque: Voir également référence pour plus de détails.

Un exemple AutoBuild simple:

 import 'package:flutter/material.dart' ;
import 'package:reactive_state/reactive_state.dart' ;

class MyPage extends StatelessWidget {
  MyPage ({ Key key, @required this .counter}) : super (key : key);

  final ValueNotifier < int > counter;

  @override
  Widget build ( BuildContext context) {
    return Scaffold (
      appBar : AppBar (title : Text ( 'Counter' )),
      body : Column (
        children : < Widget > [
          AutoBuild (builder : (context, get , track) {
            return Text ( 'Counter: ${ get ( counter )}' );
          }),
          MaterialButton (
            onPressed : () => counter.value ++ ,
            child : Text ( 'Increment' ),
          ),
        ],
      ),
    );
  }
}

Notez que dans les applications du monde réel, vous ne devriez pas muter directement l'état, mais mettez-le à la place dans des méthodes distinctes, par exemple sur un objet rendu accessible via le package du fournisseur.

Jetez également un œil à l'exemple du dépôt.

Autorun et autornner

En dehors des widgets, vous voudrez peut-être toujours réagir aux changements d'état. Vous pouvez le faire avec autoRun() et AutoRunner (voir référence pour plus de détails).

Valeur vs valotificateur

Comme alternative à ValueNotifier vous pouvez également utiliser la classe Value reactive_state qui fournit une méthode update() pour modifier des objets plus complexes:

 class User {
  String name = '' ;
  String email = '' ;
  // ...
}

var userValue = Value ( User ());
userValue. update ((user) {
  user.name = 'Adam' ;
  user.email = '[email protected]' ;
});

Ceci est similaire à l'appel setState() avec StatefulWidget . Avec update() vous pouvez modifier plusieurs attributs et Value déclenchera une seule notification une fois terminée - même si rien n'a été modifié (vous n'avez donc pas besoin d'implémenter les opérateurs de comparaison pour des objets complexes).

Valeur dérivée

DerivedValue est une ValueListenable calculée dynamiquement qui met à jour sa valeur chaque fois que ses dépendances changent:

 var user = Value ( User ());
var emailLink = DerivedValue (( get , track) => 'mailto:${ get ( user ). email }' );

Ici, emailLink peut être observé seul et est mis à jour chaque fois que user est modifié.

ListValue et MapValue

Un exemple simple montrant quelques choses qui peuvent être faites:

 final listValue = ListValue ( < int > []);
final mappedList = listValue. map ((x) => x. toString ());
final listToMap = mappedList. toMap ((x) => MapEntry ( 2 * int . parse (x), x));
final invertedMap = listToMap. map ((k, v) => MapEntry (v, k));

listValue. addAll ([ 4 , 1 ]);
// => invertedMap.value == {'4': 8, '1': 2}