Skip to content
Reactter

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:

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
1
import 'dart:async';
2
import 'package:reactter/reactter.dart';
3


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


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


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


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


26
  if (count.value == 0) {
27
    timer.cancel();
28
  }
29
}

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.

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

main.dart
1
import 'dart:async';
2
import 'package:reactter/reactter.dart';
3


4
enum CustomEvent { countdownFinished }
5


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


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


18
  // Listen to the `countdownFinished` event
19
  // and print a message when the countdown is finished
20
  Rt.on(
21
    count,
22
    CustomEvent.countdownFinished,
23
    (_, __) => print('Countdown finished!')
24
  );
25


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


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


36
  if (count.value == 0) {
37
    timer.cancel();
38
    // Emit the `CustomEvent.countdownFinished` event
39
    Rt.emit(count, CustomEvent.countdownFinished);
40
  }
41
}

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.