Flux es una arquitectura de aplicación que Facebook utiliza internamente para crear la aplicación web del lado del cliente con React. No es una biblioteca ni un marco. No es ni una biblioteca ni un marco. Es un tipo de arquitectura que complementa React as view y sigue el concepto de modelo de flujo de datos unidireccional. Es útil cuando el proyecto tiene datos dinámicos y necesitamos mantener los datos actualizados de manera efectiva. Reduce los errores de tiempo de ejecución.
tira de pitón
Las aplicaciones Flux tienen tres funciones principales al tratar con datos:
- Despachador
- Historias
- Vistas (componentes de React)
Aquí, no debe confundirse con el modelo Modelo-Vista-Controlador (MVC). Aunque los controladores existen en ambos, las vistas de controlador Flux (vistas) se encuentran en la parte superior de la jerarquía. Recupera datos de las tiendas y luego los transmite a sus hijos. Además, creadores de acciones: métodos auxiliares del despachador que se utilizan para describir todos los cambios posibles en la aplicación. Puede resultar útil como cuarta parte del ciclo de actualización de Flux.
Estructura y flujo de datos
En la aplicación Flux, los datos fluyen en una sola dirección (unidireccional). Este flujo de datos es fundamental para el patrón de flujo. El despachador, las tiendas y las vistas son nodos independientes con entradas y salidas. Las acciones son objetos simples que contienen nuevos datos y escriben propiedades. Ahora, veamos los diversos componentes de la arquitectura flux uno por uno.
Despachador
Es un centro central para la aplicación React Flux y gestiona todo el flujo de datos de su aplicación Flux. Es un registro de devoluciones de llamadas a las tiendas. No tiene inteligencia propia y simplemente actúa como un mecanismo para distribuir las acciones a las tiendas. Todas las tiendas se registran y ofrecen una devolución de llamada. Es un lugar que maneja todos los eventos que modifican la tienda. Cuando un creador de acciones proporciona una nueva acción al despachador, todas las tiendas reciben esa acción a través de las devoluciones de llamada en el registro.
La API del despachador tiene cinco métodos. Estos son:
algoritmo de cabina
| SN | Métodos | Descripciones |
|---|---|---|
| 1. | registro() | Se utiliza para registrar la devolución de llamada del controlador de acciones de una tienda. |
| 2. | cancelar el registro() | Se utiliza para dar de baja la devolución de llamada de una tienda. |
| 3. | esperar() | Se utiliza para esperar a que se ejecute primero la devolución de llamada especificada. |
| 4. | despacho() | Se utiliza para enviar una acción. |
| 5. | está despachando() | Se utiliza para comprobar si el despachador está enviando actualmente una acción. |
Historias
Contiene principalmente el estado y la lógica de la aplicación. Es similar al modelo de un MVC tradicional. Se utiliza para mantener un estado particular dentro de la aplicación, se actualiza en respuesta a una acción y emite el evento de cambio para alertar a la vista del controlador.
Puntos de vista
También se le llama vistas de controlador. Está ubicado en la parte superior de la cadena para almacenar la lógica para generar acciones y recibir nuevos datos de la tienda. Es un componente de React que escucha eventos de cambio, recibe los datos de las tiendas y vuelve a renderizar la aplicación.
para cada texto mecanografiado
Comportamiento
El método despachador nos permite activar un envío a la tienda e incluir una carga útil de datos, que llamamos acción. Es un creador de acciones o métodos auxiliares que pasan los datos al despachador.
Ventaja del flujo
- Es un modelo de flujo de datos unidireccional que es fácil de entender.
- Es de código abierto y más un patrón de diseño que un marco formal como la arquitectura MVC.
- La aplicación de fundente es más fácil de mantener.
- Las partes de aplicación de fundente están desacopladas.