Manejador de eventos

En Reactter, el manejador de eventos juega un papel fundamental en facilitar la comunicación y coordinación sin problemas entre varios componentes dentro de la aplicación. Diseñado para garantizar una gestión de estados eficiente e inyección de dependencias, fomentando un ecosistema cohesivo donde diferentes partes de la aplicación pueden interactuar armoniosamente.

API

Reactter ofrece los siguientes mecanismos de manejador de eventos:

• Hooks
  • UseEffect
• Metodos
  • Rt.on
  • Rt.one
  • Rt.emit
  • Rt.off
  • Rt.offAll

¿Cómo funciona?

El manejador de eventos en Reactter se basa en algunos conceptos fundamentales:

• Evento: Es un enumerador ( enum ) que representa una acción o suceso específico asociado a una instancia en particular. Define el tipo de interacción o cambio que puede ocurrir.
• Instancia: Es un objeto ( Object ) utilizado para identificar la entidad que origina el evento y para emitir los eventos correspondientes. Actúa como el emisor que conecta el evento con la acción.
• Acción: Es una función ( Function ) que se ejecuta en respuesta a un evento emitido. Contiene la lógica necesaria para gestionar el evento y definir el comportamiento deseado.

Entender estos conceptos es crucial para gestionar eficazmente las interacciones basadas en eventos en las aplicaciones de Reactter.

Ejemplo

Para ilustrar esto, tomemos un ejemplo de cuenta regresiva visto en la página de Gestión de estados:

main.dart

import 'dart:async';
import 'package:reactter/reactter.dart';

// Crea un estado reactivo llamado `count` utilizando la clase `Signal`
final count = Signal(10);

void main() async {
  // Escucha el evento `didUpdate` del estado `count`
  // e imprime `value` de `count` con cada actualización
  Rt.on(
    count,
    Lifecycle.didUpdate,
    (_, __) => print('Count: $count')
  );

  // Crea un temporizador que decrementa el `value` de `count`
  // en 1 cada segundo hasta que llegue a 0
  await Timer.periodic(Duration(seconds: 1), countdown);
}

// Decrementa `value` de `count` en 1 cada ciclo del temporizador
// y cancela el `timer` cuando `value` de `count` llegue a 0
void countdown(Timer timer) {
  count.value -= 1;

  if (count.value == 0) {
    timer.cancel();
  }
}

En este ejemplo, desde la línea 10 a la 14, vemos que el método Rt.on se utiliza para suscribirse al evento Lifecycle.didUpdate de la instancia count. Cada que cambie el estado de count, se invoca la función (acción), que imprime el valor (value) actual del estado de count.

Aquí, no podemos ver la sentencia que emite ( emit ) porque se encuentra encapsulada dentro de la clase Signal , y se llama cuando el value del estado count cambia. Para ver cómo se emite un evento, hagamos un pequeño ajuste para agregar un emisor:

main.dart

import 'dart:async';
import 'package:reactter/reactter.dart';

enum CustomEvent { countdownFinished }

// Crea un estado reactivo llamado `count` utilizando la clase `Signal`
final count = Signal(10);

void main() async {
  // Escucha el evento `didUpdate` del estado `count`
  // e imprime `value` de `count` con cada actualización
  Rt.on(
    count,
    Lifecycle.didUpdate,
    (_, __) => print('Count: $count')
  );

  // Escucha el evento `countdownFinished` del estado `count`
  // e imprime un mensaje cuando la cuenta regresiva finaliza
  Rt.on(
    count,
    CustomEvent.countdownFinished,
    (_, __) => print('Countdown finished!')
  );

  // Crea un temporizador que decrementa el `value` de `count`
  // en 1 cada segundo hasta que llegue a 0
  await Timer.periodic(Duration(seconds: 1), countdown);
}


// Decrementa `value` de `count` en 1 cada ciclo del temporizador
// y cancela el `timer` cuando `value` de `count` llegue a 0
void countdown(Timer timer) {
  count.value -= 1;

  if (count.value == 0) {
    timer.cancel();
    // Emite el evento `countdownFinished` cuando la cuenta regresiva finaliza
    Rt.emit(count, CustomEvent.countdownFinished);
  }
}

Hemos añadido un nuevo evento llamado CustomEvent.countdownFinished y una nueva function(accion) que imprime un mensaje cuando la cuenta regresiva finaliza. Cuando la cuenta regresiva llega a 0 , la instancia count emite el evento CustomEvent.countdownFinished, y la función(accion) se invoca, imprimiendo el mensaje.

Este ejemplo demuestra cómo el sistema de manejador de eventos en Reactter facilita la comunicación sin problemas entre diferentes partes de la aplicación, facilitando una coordinación e interacción eficientes.