La idea principal detrás del uso de la arquitectura Flux es tener una arquitectura de aplicación simple . Esto hace que sea más fácil de mantener y razonar sobre cuándo se vuelve más complejo. Como no hay ambigüedades en la relación entre varios componentes, el trabajo se mueve.
Además de eso, Flux es consistente y repetible, lo que hace que sea muy lógico trabajar con él, al crear una acción. También es más fácil cuando desea que la Tienda sepa cómo manejar la Acción, almacenar datos y activar el evento de cambio.
Y aquí están los principales componentes de su arquitectura:
- ¿Cómo funciona una API? ¿Dónde puedo obtener información sobre las API? ¿Hay buenos libros sobre el tema? ¿Cómo hago el mío?
- Cómo comenzar a construir una aplicación web usando React
- ¿Qué es un sistema GDS de puerto de viaje?
- ¿Existe un marco web no apto para desarrolladores?
- ¿Cuáles son las ventajas y desventajas entre cobrar a los usuarios de forma continua y el pago único a tanto alzado para una cuenta premium bajo un modelo freemium?
Los componentes en la arquitectura Flux interactúan más como EventBus y menos como un MVC.
Flux no es en realidad una biblioteca o un marco, es un nuevo tipo de arquitectura que Facebook usa internamente cuando trabaja con React. Por lo tanto, la función principal de Flux sería complementar React y promover el Flujo de datos unidireccionales.
Arquitectura de aplicación de flujo
En una arquitectura típica de Flux, encontrará los siguientes componentes.
- Acciones : ayudantes que pasan datos al Despachador
- Despachador : recibe estas acciones y difunde las cargas útiles a las devoluciones de llamada registradas.
- Tiendas : actuar como contenedores para el estado y la lógica de la aplicación. El verdadero trabajo en la aplicación se realiza en las tiendas. Las Tiendas registradas para escuchar las acciones del Despachador lo harán en consecuencia y actualizarán las Vistas.
- Vistas del controlador : los componentes de reacción toman el estado de las tiendas y luego lo pasan a los componentes secundarios.
Los controladores en el MVC y Flux son diferentes. Aquí los controladores son vistas de controlador y se encuentran en la parte superior de la jerarquía. Las vistas son componentes de React.
Toda la funcionalidad se encuentra generalmente dentro de la tienda. La Tienda es donde se realiza todo el trabajo y le dice al Despachador qué eventos / acciones está escuchando.
Cuando ocurre un evento, el Despachador enviaría la “carga útil” a la Tienda que está registrada para escuchar esa acción en particular. Ahora le corresponde a la Tienda actualizar la Vista, que a su vez desencadena una acción. La acción que sucederá también está predeterminada como nombre, tipo de acción, etc.
La Vista propaga la Acción a través de un Despachador central y esto se enviará a varias Tiendas. Estas tiendas contendrían la lógica comercial de una aplicación y otros datos. Actualiza todas las vistas.
Funciona mejor con el estilo de programación de React y la Tienda envía actualizaciones sin la necesidad de detallar cómo cambiar las vistas entre estados.
Esto prueba que el patrón Flux sigue un flujo de datos unidireccional. Acción, Despachador, Almacenar y Ver son nodos independientes con entradas y salidas específicas. Los datos fluyen a través del Dispatcher, el centro central, que a su vez gestiona todos los datos.
El despachador actúa como un registro con devoluciones de llamadas registradas a las que responden las tiendas. Las tiendas emitirán un cambio que será seleccionado por Controller-Views.
Esto es lo que sucede cuando una vista se propaga en el sistema:
Esto demuestra que no hay enlaces bidireccionales, la estructura es similar a la programación relativa funcional y más algo como la programación basada en flujo.
Las dependencias que se producen en las tiendas se mantienen en una jerarquía estricta, mientras que Dispatcher maneja las actualizaciones. Esta estructura también resuelve los problemas que vienen naturalmente con la unión bidireccional.
Para crear un Despachador, debe traer el Despachador de Flux. Haga esto escribiendo Dispatcher.js.
Para más publicaciones, consulte el blog de la compañía Solar Digital.
Si te gusta el comentario, ¡vota!
