State management

State management is a critical aspect of any application, as it is responsible for controlling and maintaining data consistency over time. It facilitates updating and tracking changes in the state, ensuring a smooth user experience and stable application operation.

At Reactter, we understand the importance of state management, which is why we have designed a state management system that is efficient, reactive, and easy to use.

To continue, we will show you the mechanisms that Reactter offers for state management and how they work.

API

Reactter provides a variety of mechanisms for state management, including classes, hooks, and methods:

• Classes
  • Signal
  • RtState
  • RtHook
• Hooks
  • UseState
  • UseAsyncState
  • UseReducer
  • UseCompute
• Methods
  • Rt.lazyState
  • Rt.batch
  • Rt.untracked

Tip

Learn about Hooks .

How it works

Reactter’s state management system is based on the concept of reactivity. Contrary to the prevailing notion that implementing reactive programming in Dart can be challenging, Reactter greatly simplifies this process. To dive into the concept, let’s start by exploring what constitutes a state in Reactter.

State

All states in Reactter are classes that inherit RtState , which encapsulates the data and behavior of a particular state, and provides a way to notify observers when the state changes.

Note

Reactter offers three fundamental approaches for creating states: RtState , Signal and Hooks .

State methods

RtState class provides some methods for managing states. Let’s know about them:

• update : Executes a callback function and notify its observers that the state has changed. When it is invoked, it emits two lifecycle events to signal the state transition:
  • Lifecycle.willUpdate is emitted first, indicating the impending update.
  • Lifecycle.didUpdate is emitted once the update process is complete.
• notify : Forces the state to notify its observers. Unlike update , it emits only the Lifecycle.didUpdate event, as it doesn’t involve any preparatory steps before the notification.
• bind : Establishes a connection between the state and a specific instance. This connection allows the instance to reactively update based on changes to the state. By binding the state, the instance becomes aware of changes to the state and can appropriately reflect those changes in its behavior.
• unbind : Releases the connection between the state and the instance. When unbinding, the instance will no longer receive updates from the state. This can be useful when an instance is no longer actively using the state or when it needs to detach from the state temporarily or permanently.
• dispose : Is responsible for cleaning up the state and any associated observers or resources. Disposing of the state ensures that it is properly released and no longer consumes memory or processing resources unnecessarily.

Note

While the bind , unbind and dispose methods are normally used to manage the lifecycle of a state, Reactter handles this automatically, when the state is declared inside an instance that exists within Reactter’s context via the dependecy injection, so you don’t need to worry about it(Learn more about Binding State to Dependency).

Example

Let’s see an countdown example using Signal and understand what happens under the hood.

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 {
  // Liste  n 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 invoked the `countdown` function every second
  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();
  }
}

Now let’s see what the Signal class contains and how the count state is updated in the example above.

signal.dart

class Signal<T> with RtState {
  // State value
  T _value;

  T get value => _value;

  set value(T val) {
    if (_value == val) return;

    // Notify listeners that the state has changed,
    // triggering the `Lifecycle.willUpdate` and `Lifecycle.didUpdate` events in order.
    update((_) => _value = val);
  }

  // Private constructor, only a `Signal` instance can be created through the factory.
  Signal._(this._value);

  factory Signal(T value) {
    // Register a new state in the Reactter context
    return Rt.registerState(
      () => Signal._(value),
    );
  }
  [...]
}

During the process, as the value of count changes, the Lifecycle.didUpdate event is triggered, which is fired by the update method (signal.dart, line 12). This event is listened to by the Rt.on method (main.dart, line 10), which prints the value of count.

This occurs thanks to the reactivity of Reactter, which is responsible for notifying listeners by emitting events related to the lifecycle of the state.

Tip

Learn about Lifecycle .