Clever Geek Handbook

sobre la arquitectura Redux en las aplicaciones Flutter

Recientemente apareció un artículo sobre arquitectura limpia en Flutter. Quiero cubrir el tema desde un ángulo ligeramente diferente y desarrollar el tema de la gestión del estado global con Redux.

Y un poco sobre mí: he estado creando productos comerciales durante unos 10 años, de los cuales he estado en Flutter durante casi 2 años, y logré probar a todos los gerentes estatales famosos. Algunos evocan recuerdos neutrales: BLoC, Provider, una clase de bloque global con sus transmisiones, y algunos negativos: MobX.

Como resultado, para mí, me decidí por Redux para el estado global y las bibliotecas para implementar la estructura de la aplicación:

  • valor_construido

  • built_collection

  • rxdart (opcional)

  • flutter_simple_dependency_injection (o dioc)

  • construido _ redux

Este es mi conjunto mínimo de bibliotecas para implementar proyectos de cualquier nivel.

Ahora paso a paso

Estructura general de la aplicación

Estructura general de la aplicación
Figura: 1. Estructura general de la solicitud
Figura: 1. Estructura general de la solicitud

  Las carpetas en la raíz son todas estándar, se crean automáticamente, pero hay otras adicionales:

  • build.yaml - built_value,

  • analysis_options.yaml - . .

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

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

-
Figura: 2. Un ejemplo de pre-barajado
. 2. -

Figura: 3. Un ejemplo de un conjunto de guiones
. 3.

Flutter-

lib :

  • domain - : , , , , , ,

  • tools -

  • di - ,

  • features - UI , ,

  • services - , , ,

  • app - . MaterialApp CupertinoApp

  • app_routes.dart -

Domain

-
Figura: 4. Un ejemplo de la implementación del modelo de clase
. 4. -

  • actions

    built_redux Redux-

-
Figura: 5. Un ejemplo de implementación de una clase de modelo de acción
. 5. -

  • middlewares

, built_redux

-
Figura: 6. Un ejemplo de implementación de la clase de middleware
. 6. -

  • epics

    . built_redux. rxdart

-
Figura: 7. Un ejemplo de implementación de la clase épica
. 7. -

  • reducers

,

-
Figura: 8. Un ejemplo de implementación de una clase reductora
. 8. -

  • states

    Redux. - - AppState, : , .. built_redux

-
Figura: 9. Un ejemplo de implementación de un estado de clase
. 9. -

DI

. flutter_simple_dependency_injection

Figura: 10. Un ejemplo de implementación de inversión de dependencias
. 10.

Features

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

  • initState

  • - StreamBuilder’

  • dispose

components - -,

BLoC

- -. , di-. ,   -

BLoC
Figura: 11. Un ejemplo de una clase BLoC abstracta básica
. 11. BLoC

- BaseBloc .

BLoC-
Figura: 12. Un ejemplo de una clase BLoC
. 12. BLoC-

  :

  2. ,

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

-

Figura: 13. Un ejemplo de un método para llamar a una acción
. 13.

StreamBuilder:

Figura: 14. Cambios en el estado de la reproducción
. 14.

, , , .

:

  1. . , . 300 2

  2. Redux , ,

:

  1. , , built_value “ ”

  2. Redux

  3. /

  4. . , 13 Flutter ,

  5. , UI - , ( Redux , )

Y quiero agregar que no hay proyectos simples. A veces, un proyecto favorito se convierte en productos comerciales. Y luego, después de una arquitectura diseñada incorrectamente, el funcionamiento normal puede volverse imposible. Tengo un proyecto, también en Flutter, que, por interés, traté de escribir a través de la arquitectura MobX. El proyecto ha crecido. Se volvió, por decirlo suavemente, incómodo trabajar, tuve que reescribir todo en Redux.  

El propósito de este artículo era llamar la atención de desarrolladores novatos o experimentados sobre una arquitectura Redux que ha funcionado bien en un producto comercial muy grande con decenas de miles de usuarios diarios. Ella sobrevivió y resistió la llegada / salida de colegas, la introducción / eliminación de varias funciones.



More articles:


All Articles