Event Handler

In Reactter, event handler plays a pivotal role in facilitating seamless communication and coordination between various components within the application. Designed to ensure efficient state management and dependency injection, fostering a cohesive ecosystem where different parts of the application can interact harmoniously.

API

Reactter offers the following event handler mechanisms:

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

How it works

Event handler in Reactter is based on a few fundamental concepts:

• Event: Is a enum that represents a specific action or occurrence in the application.
• Instance: Is an object that emits and listens to events.
• Listener: Is a function that is executed when an event is emitted.

Understanding these concepts is crucial for effectively managing event-driven interactions in Reactter apps.

Example

To illustrate this, let’s take a countdown example seen from the State Management page:

main.dart

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

// Create a reactive state called `count` using the `Signal` class
final count = Signal(10);

void main() async {
  // Listen to the `didUpdate` event of the `count` state
  // and print the `value` of `count` each time it changes
  Rt.on(
    count,
    Lifecycle.didUpdate,
    (_, __) => print('Count: $count')
  );

  // Create a timer that decrements the `value` of `count`
  // by 1 every second until it reaches 0
  await Timer.periodic(Duration(seconds: 1), countdown);
}

// Decrement the `value` of `count` by 1 each time the timer ticks
// and cancel the `timer` when the `value` of `count` reaches 0
void countdown(Timer timer) {
  count.value -= 1;

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

In this example, the line 10 to 14, we see that the Rt.on method is used to subscribe to the Lifecycle.didUpdate event of the count instance. Whenever the count state changes, the listener function is invoked, printing the current value of the count state.

Here, we can’t see the emitter, because it’s encapsulated within the Signal class, and it’s called when the value of the count state changes. This mechanism is made possible by the underlying state management system.

Tip

Learn about Lifecycle.

Now, we do a small tweak to add an emitter:

main.dart

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

enum CustomEvent { countdownFinished }

// Create a reactive state called `count` using the `Signal` class
final count = Signal(10);

void main() async {
  // Listen to the `didUpdate` event of the `count` state
  // and print the `value` of `count` each time it changes
  Rt.on(
    count,
    Lifecycle.didUpdate,
    (_, __) => print('Count: $count')
  );

  // Listen to the `countdownFinished` event
  // and print a message when the countdown is finished
  Rt.on(
    count,
    CustomEvent.countdownFinished,
    (_, __) => print('Countdown finished!')
  );

  // Create a timer that decrements the `value` of `count`
  // by 1 every second until it reaches 0
  await Timer.periodic(Duration(seconds: 1), countdown);
}

// Decrement the `value` of `count` by 1 each time the timer ticks
// and cancel the `timer` when the `value` of `count` reaches 0
void countdown(Timer timer) {
  count.value -= 1;

  if (count.value == 0) {
    timer.cancel();
    // Emit the `CustomEvent.countdownFinished` event
    Rt.emit(count, CustomEvent.countdownFinished);
  }
}

We added a new event called CustomEvent.countdownFinished and a new listener that prints a message when the countdown is finished. When the countdown reaches 0 , the count instance emits the CustomEvent.countdownFinished event, and the listener function is invoked, printing the message.

This example demonstrates how the event handler system in Reactter enables seamless communication between different parts of the application, facilitating efficient coordination and interaction.