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

The event handler in Reactter is based on some fundamental concepts:

• Event: It is an enum that represents a specific action or occurrence associated with a particular instance. It defines the type of interaction or change that can happen.
• Instance: It is an Object used to identify the entity that triggers the event and to emit the corresponding events. It acts as the emitter that connects the event to the action.
• Action: It is a Function that executes in response to an emitted event. It contains the logic needed to manage the event and define the desired behavior.

Understanding these concepts is crucial for efficiently managing event-driven interactions in Reactter applications.

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 each time 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, we see that the Rt.on method is used to subscribe to the event Lifecycle.didUpdate of the count instance from line 10 to 14. Whenever the count state changes, the listener function is invoked, printing the current value of the count state.

Here, we cannot see the emitting statement( emit ) because it is encapsulated inside the Signal class and is called when the value of the count state changes. To see how an event is emitted, let’s make a small adjustment 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 each time 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.