Flutter & Redux : une recette bien ordonnée avec dispatch

Flutter propose plusieurs solutions pour la gestion d’état, mais lorsqu’une application devient complexe et nécessite une structure claire, Redux devient un choix pertinent.

I. Introduction à Redux dans Flutter  

Inspiré du modèle de flux unidirectionnel de données, Redux permet de centraliser l’état de l’application et de le modifier via des actions claires, prévisibles et testables.

Le cœur de Redux repose sur trois concepts :

• Store : l’état global.
• Action : un événement décrivant un changement.
• Reducer : une fonction qui transforme l’état en fonction de l’action.

L’objectif de cet article est de comprendre comment utiliser dispatch avec Redux dans Flutter, en gardant une approche simple, pédagogique et rigoureuse.

II. Mise en place de Redux dans Flutter  

Avant d’utiliser dispatch, voici comment intégrer Redux dans une application Flutter.

1. Ajout des dépendances  

Ajoutez à votre fichier pubspec.yaml :

dependencies:
  flutter:
    sdk: flutter
  flutter_redux: ^0.10.0
  redux: ^5.0.0

2. Structure de base  

Créez une action simple :

class IncrementAction {}

Définissez un reducer :

int counterReducer(int state, dynamic action) {
  if (action is IncrementAction) {
    return state + 1;
  }
  return state;
}

Initialisez le Store :

final store = Store<int>(counterReducer, initialState: 0);

Intégrez le StoreProvider :

return StoreProvider<int>(
  store: store,
  child: MyApp(),
);

Vous êtes maintenant prêt à utiliser dispatch.

III. Comprendre et utiliser dispatch  

La fonction dispatch sert à envoyer une action au reducer via le store. Cela déclenche une transformation de l’état global.

Exemple d’utilisation :  

StoreConnector<int, VoidCallback>(
  converter: (store) {
    return () => store.dispatch(IncrementAction());
  },
  builder: (context, callback) => ElevatedButton(
    onPressed: callback,
    child: Text('Incrémenter'),
  ),
)

L’appel à store.dispatch(...) :

• transmet l’action,
• le reducer traite cette action,
• et Flutter reconstruit les widgets dépendants du nouvel état.

Cela garantit une gestion centralisée, un code testable, et un débogage facilité.

IV. Cas d’usage pratiques de dispatch  

1. Gestion d’un compteur  

Exemple simple :

store.dispatch(IncrementAction());

2. Connexion utilisateur  

store.dispatch(LoginAction(username: "user", password: "pass"));

Dans ce cas, l’action peut déclencher un middleware pour lancer une requête HTTP avant que l’état ne soit modifié.

3. Chargement asynchrone de données  

Couplé avec redux_thunk :

ThunkAction<AppState> fetchData = (Store<AppState> store) async {
  store.dispatch(StartLoadingAction());
  final data = await fetchFromApi();
  store.dispatch(LoadSuccessAction(data));
};

V. Alternatives à dispatch : comparaison des méthodes  

Il existe plusieurs approches de gestion d’état dans Flutter. Voici un tableau comparatif :

Chaque solution a ses cas d’usage idéaux. Redux reste un bon choix pour les développeurs venant du web ou nécessitant une architecture strictement contrôlée.

Conclusion  

Utiliser dispatch avec Redux dans Flutter offre une architecture prévisible, robuste et extensible. Bien qu’elle nécessite une phase d’apprentissage plus exigeante que d’autres solutions, elle permet une meilleure lisibilité du code, un excellent support des tests unitaires, et une gestion claire des flux de données. Pour les projets ambitieux, Redux s’avère être un outil de confiance. Toutefois, il est important de comparer les alternatives pour choisir la méthode qui correspond le mieux à la taille, à la nature et aux besoins de votre projet Flutter.

🔗 Ressources utiles  

Pour aller plus loin :

• Documentation officielle Flutter
• Codelab Redux Flutter par Google
• flutter_redux sur pub.dev
• redux sur pub.dev