¿Cómo funciona la demostración de reaccionar flux todomvc?
Flux es un conjunto de patrones de arquitectura de aplicaciones front-end utilizados por Facebook.
La aplicación flux consta principalmente de cuatro partes:
Programador
Maneja la asignación de acciones y mantiene las dependencias entre tiendas.
Almacenar
Partes lógicas y de datos
Paisaje
Los componentes de React pueden considerarse como vistas de controlador, que responden en forma de visualiza la interacción del usuario.
Acciones
Proporcionadas al programador para pasar datos al almacenamiento.
En vista del concepto de Flux mencionado anteriormente, es necesario escribir una biblioteca de clases simple para realizar la conexión de estas funciones. Hay muchas implementaciones en el mercado. Aquí analizamos la implementación oficial de Dispatcher.js en Facebook.
Flujo de datos unidireccional
Primero, comprendamos cómo funciona el “flujo de datos unidireccional” principal de Flux:
Action-gt despachador - gt;Store ->Ver
La mayoría de las veces, las vistas desencadenan acciones a través de la interacción del usuario, por lo que un flujo de datos simple pero completo se vería así:
Descripción general del flujo
Todo el proceso es el siguiente:
Primero debe haber una acción. Al definir algunos métodos de creación de acciones, puede crear una acción a pedido y proporcionársela al programador.
La capa de vista desencadena acciones a través de la interacción del usuario.
Dispatcher distribuirá la acción desencadenada a todas las funciones de devolución de llamada almacenadas registradas.
Después de que la función de devolución de llamada de almacenamiento actualice sus propios datos en función de la acción recibida, activará un evento de cambio para notificar a la Vista que los datos han cambiado.
La vista escuchará este evento de cambio, obtendrá los nuevos datos correspondientes y llamará a setState para actualizar la interfaz de usuario del componente.
Todos los estados son mantenidos por Store y los datos se transfieren a través de Action, formando el ciclo de flujo de datos unidireccional mencionado anteriormente, por lo que la división del trabajo entre varias partes de la aplicación es bastante clara y altamente desacoplada.
Este flujo de datos unidireccional hace que todo el sistema sea transparente y predecible.
Dispatcher
Una aplicación solo necesita un despachador como centro de distribución para gestionar todos los flujos de datos y distribuir acciones a la tienda. No hay mucha otra lógica (también puedes poner alguna acción). métodos de creador aquí)).
Dispatcher distribuye operaciones a funciones de devolución de llamada registradas por la Tienda, que es diferente del modelo general de suscripción/publicación porque:
La función de devolución de llamada no se suscribe a un evento/canal específico, Cada acción se envía a todas las funciones de devolución de llamada registradas.
Se pueden especificar funciones de devolución de llamada para que se llamen después de otras funciones de devolución de llamada.
Basado en la idea arquitectónica de Flux, la API proporcionada por Dispatcher.js es muy simple:
Registrar (devolución de llamada de función): String registra la función de devolución de llamada y devuelve un comando utilizado en la tarjeta waitFor().
Anular el registro (identificación de cadena): anula la devolución de llamada mediante la eliminación del token.
WaitFor(array id): void ejecuta la devolución de llamada actual después de que se ejecuta la función de devolución de llamada especificada. Este método solo se puede utilizar dentro de la función de devolución de llamada de una operación de envío.
Dispatch(Object Payload): void Envía la carga útil de la acción a todas las devoluciones de llamada registradas.
IsDispatching(): booleano devuelve si el programador se encuentra actualmente en el estado de distribución.
Dispatcher es solo un pegamento, y el resto de Store, View y Action deben implementarse de acuerdo con las necesidades específicas.
A continuación, combine el ejemplo simple de flux - todo MVC, extraiga las partes clave y vea todo el proceso de cómo conectar Flux en aplicaciones reales. Espero tener una comprensión más intuitiva e intuitiva. cada parte de Flux. Comprensión profunda.