State Management

State management is a critical aspect of any application. It allows you to manage the state of your application, and facilitates seamless tracking and handling of changes to it.

API

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

• Classes
  • Signal
• 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 state 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.

Reactter offers two fundamental approaches for creating states: Signal and Hooks .

State methods

RtState class provides some methods for managing states, which are:

• update : Executes a callback function and notify its listeners that the state has changed. When it is invoked, it emits two events to signal the state transition: Lifecycle.willUpdate is emitted first, indicating the impending update, followed by Lifecycle.didUpdate once the update process is complete.
• refresh : Forces the state to notify its listeners that it has changed. 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 listeners or resources. Disposing of the state ensures that it is properly released and no longer consumes memory or processing resources unnecessarily.

Note

The bind , unbind and dispose methods are normally used to manage the Lifecycle of a state. However, 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 example of how a Signal state is used and 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 {
  // 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();
  }
}

During the process, as the value of count changes and triggers the Lifecycle.didUpdate event, internally within the Signal class, the update method is invoked to notify its listeners(in line 11 of the code below), as follows:

signal.dart

class Signal<T> extends RtState[...] {
  T _value;

  Signal(this._value);

  T get value => _value;

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

    update((_) => _value = val);
  }

  [...]
}

Tip

Learn about Lifecycle .