Informationen zur Redux-Architektur in Flutter-Anwendungen

Kürzlich gab es einen Artikel über saubere Architektur in Flutter. Ich möchte das Thema aus einem etwas anderen Blickwinkel behandeln und das Thema der Verwaltung des globalen Zustands mit Redux entwickeln.

Und ein wenig über mich selbst: Ich habe seit ungefähr 10 Jahren kommerzielle Produkte entwickelt, von denen ich seit fast 2 Jahren bei Flutter bin, und ich habe es geschafft, alle berühmten Staatsmanager auszuprobieren. Einige rufen neutrale Erinnerungen hervor - BLoC, Provider, eine globale Blockklasse mit ihren Streams, andere negative - MobX.

Aus diesem Grund habe ich mich für den globalen Status und die Bibliotheken für die Implementierung der Anwendungsstruktur für Redux entschieden:

  • built_value

  • built_collection

  • rxdart (optional)

  • flutter_simple_dependency_injection (oder Diözese)

  • gebaut _ Redux

Dies ist meine minimale Anzahl von Bibliotheken für die Implementierung von Projekten jeder Ebene.

Nun Schritt für Schritt

Allgemeine Struktur der Anwendung

Allgemeine Struktur der Anwendung
Zahl:  1. Allgemeine Struktur der Anwendung
Zahl: 1. Allgemeine Struktur der Anwendung

  Die Ordner im Stammverzeichnis sind alle Standardordner. Sie werden automatisch erstellt, es gibt jedoch weitere:

  • build.yaml - built_value,

  • analysis_options.yaml - . .

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

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

-
Zahl:  2. Ein Beispiel für Pre-Shuffles
. 2. -

Zahl:  3. Ein Beispiel aus einer Reihe von Skripten
. 3.

Flutter-

lib :

  • domain - : , , , , , ,

  • tools -

  • di - ,

  • features - UI , ,

  • services - , , ,

  • app - . MaterialApp CupertinoApp

  • app_routes.dart -

Domain

-
Zahl:  4. Ein Beispiel für die Implementierung des Klassenmodells
. 4. -

  • actions

    built_redux Redux-

-
Zahl:  5. Ein Beispiel für die Implementierung einer Aktionsmodellklasse
. 5. -

  • middlewares

, built_redux

-
Zahl:  6. Ein Beispiel für die Implementierung der Middleware-Klasse
. 6. -

  • epics

    . built_redux. rxdart

-
Zahl:  7. Ein Beispiel für die Implementierung der epischen Klasse
. 7. -

  • reducers

,

-
Zahl:  8. Ein Beispiel für die Implementierung einer Reduziererklasse
. 8. -

  • states

    Redux. - - AppState, : , .. built_redux

-
Zahl:  9. Ein Beispiel für die Implementierung eines Klassenzustands
. 9. -

DI

. flutter_simple_dependency_injection

Zahl:  10. Ein Beispiel für die Implementierung der Inversion von Abhängigkeiten
. 10.

Features

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

  • initState

  • - StreamBuilder’

  • dispose

components - -,

BLoC

- -. , di-. ,   -

BLoC
Zahl:  11. Ein Beispiel für eine grundlegende abstrakte BLoC-Klasse
. 11. BLoC

- BaseBloc .

BLoC-
Zahl:  12. Ein Beispiel für eine BLoC-Klasse
. 12. BLoC-

  :

  1. ,

  2. . / , , . , - (, , , ..), ( , , , nextSubstate)

-

Zahl:  13. Ein Beispiel für eine Methode zum Aufrufen einer Aktion
. 13.

StreamBuilder:

Zahl:  14. Änderungen des Rendering-Status
. 14.

, , , .

:

  1. . , . 300 2

  2. Redux , ,

:

  1. , , built_value “ ”

  2. Redux

  3. /

  4. . , 13 Flutter ,

  5. , UI - , ( Redux , )

Und ich möchte hinzufügen, dass es keine einfachen Projekte gibt. Manchmal wächst ein Haustierprojekt zu kommerziellen Produkten. Und dann kann nach einer falsch gestalteten Architektur ein normaler Betrieb unmöglich werden. Ich habe ein Projekt, auch über Flutter, das ich aus Interesse versucht habe, durch die MobX-Architektur zu schreiben. Das Projekt ist gewachsen. Es wurde, gelinde gesagt, unangenehm zu arbeiten, ich musste alles auf Redux umschreiben.  

Der Zweck dieses Artikels war es, Anfänger oder erfahrene Entwickler auf eine Redux-Architektur aufmerksam zu machen, die bei einem sehr großen kommerziellen Produkt mit Zehntausenden von täglichen Benutzern gute Ergebnisse erzielt hat. Sie überlebte und widerstand der Ankunft / Abreise von Kollegen, der Einführung / Entfernung verschiedener Merkmale.




All Articles