Clever Geek Handbook

à propos de l'architecture Redux dans les applications Flutter

Récemment, il y avait un article sur l'architecture propre dans Flutter. Je veux couvrir le sujet sous un angle légèrement différent et développer le sujet de la gestion de l'état global avec Redux.

Et un peu sur moi-même: je crée des produits commerciaux depuis environ 10 ans, dont je suis chez Flutter depuis presque 2 ans, et j'ai réussi à essayer tous les fameux State Managers. Certains évoquent des souvenirs neutres - BLoC, Provider, une classe de bloc globale avec leurs flux, et d'autres négatifs - MobX.

En conséquence, pour moi, j'ai opté pour Redux pour l'état global et les bibliothèques pour l'implémentation de la structure de l'application:

  • built_value

  • built_collection

  • rxdart (facultatif)

  • flutter_simple_dependency_injection (ou dioc)

  • construit _ redux

Ceci est mon ensemble minimal de bibliothèques pour la mise en œuvre de projets de tous niveaux.

Maintenant étape par étape

Structure générale de l'application

Structure générale de l'application
Figure: 1. Structure générale de l'application
Figure: 1. Structure générale de l'application

  Les dossiers à la racine sont tous standard, créés automatiquement, mais il y en a d'autres:

  • build.yaml - built_value,

  • analysis_options.yaml - . .

  • scripts - /// : , , , Flutter, . -. : prepare_app - Flutter, prepare_app_hover - hover. , ( ) dartfix -

  • application_bundle - . , JSON - - "" , , ..

-
Figure: 2. Un exemple de pré-mélange
. 2. -

Figure: 3. Un exemple tiré d'un ensemble de scripts
. 3.

Flutter-

lib :

  • domain - : , , , , , ,

  • tools -

  • di - ,

  • features - UI , ,

  • services - , , ,

  • app - . MaterialApp CupertinoApp

  • app_routes.dart -

Domain

-
Figure: 4. Un exemple de mise en œuvre du modèle de classe
. 4. -

  • actions

    built_redux Redux-

-
Figure: 5. Un exemple d'implémentation d'une classe de modèle d'action
. 5. -

  • middlewares

, built_redux

-
Figure: 6. Un exemple de mise en œuvre de la classe middleware
. 6. -

  • epics

    . built_redux. rxdart

-
Figure: 7. Un exemple d'implémentation de la classe epic
. 7. -

  • reducers

,

-
Figure: 8. Un exemple d'implémentation d'une classe de réducteur
. 8. -

  • states

    Redux. - - AppState, : , .. built_redux

-
Figure: 9. Un exemple d'implémentation d'un état de classe
. 9. -

DI

. flutter_simple_dependency_injection

Figure: 10. Un exemple de mise en œuvre de l'inversion des dépendances
. 10.

Features

- , . - blocs, components, widgets, tools. - widgets . (BLoC) - , . - - . StatefulWidget’

  • initState

  • - StreamBuilder’

  • dispose

components - -,

BLoC

- -. , di-. ,   -

BLoC
Figure: 11. Un exemple de classe BLoC abstraite de base
. 11. BLoC

- BaseBloc .

BLoC-
Figure: 12. Un exemple de classe BLoC
. 12. BLoC-

  :

  2. ,

  3. . / , , . , - (, , , ..), ( , , , nextSubstate)

-

Figure: 13. Un exemple de méthode pour appeler une action
. 13.

StreamBuilder:

Figure: 14. Modifications de l'état du rendu
. 14.

, , , .

:

  1. . , . 300 2

  2. Redux , ,

:

  1. , , built_value “ ”

  2. Redux

  3. /

  4. . , 13 Flutter ,

  5. , UI - , ( Redux , )

Et je veux ajouter qu'il n'y a pas de projets simples. Parfois, un projet pour animaux de compagnie se transforme en produits commerciaux. Et puis, après une architecture mal conçue, un fonctionnement normal peut devenir impossible. J'ai un projet, également sur Flutter, que, par souci d'intérêt, j'ai essayé d'écrire à travers l'architecture MobX. Le projet a grandi. Il est devenu, pour le dire légèrement, inconfortable de travailler, j'ai dû tout réécrire sur Redux.  

Le but de cet article était d'attirer l'attention des développeurs novices ou expérimentés sur une architecture Redux qui a bien fonctionné sur un très gros produit commercial avec des dizaines de milliers d'utilisateurs quotidiens. Elle a survécu et a résisté à l'arrivée / départ de collègues, à l'introduction / suppression de diverses fonctionnalités.



More articles:


All Articles