Binding State to Dependency

Tip

This guies assumes you’ve already read the Dependency Injection and State Management. It’s recommended read that first if you’re new in Reactter.

A Reactter state( RtState ) such as Signal or any Hooks can be bound to the dependency, allowing the state to be manipulated directly from the dependency and to notify its listeners about any changes. Additionally, it ensures that the state is automatically disposed of when the dependency is no longer needed.

By integrating state directly within dependencies, you benefit from cleaner and more maintainable code. The automatic handling by Reactter means less boilerplate and fewer errors related to manual state management, leading to a more efficient development process. This approach simplifies the synchronization between state and its associated dependency, enhancing the overall responsiveness and reliability of your application.

Automatic binding

For that happened automatically, the state must be declared as a property or within constructor of the dependency. When this is done, Reactter automatically takes care of binding the state to the dependency, ensuring seamless state management and reactivity, e.g.:

count_controller.dart

import "package:reactter/reactter.dart";

class CountController {
  // State declared as property
  final uCount = UseState(0);

  CountController() {
    // State declared within constructor
    UseEffect(() {
      print("Count: ${uCount.value}");
    }, [uCount]);
  }
}

In the example above, the uCount state is declared as a property of the CountController class and the UseEffect hook is used within the constructor to react to changes in the uCount state, printing its value whenever it changes. This automatically binds the uCount state and UseEffect hook to the CountController instance, demonstrates how Reactter handles the binding and reactivity seamlessly.

Caution

If the state is declared lazily (e.g., using late keyword), it will not be automatically bound to the dependency. In such cases, you need to use the Rt.lazyState method to bind the state to the dependency(See lazy binding).

Lazy binding

When a state is declared lazily, it is not automatically bound to the dependency. In such cases, you can use the Rt.lazyState method to bind the state to the dependency, e.g.:

count_controller.dart

import "package:reactter/reactter.dart";

class CountController {
  final int initialCount;

  late final uCount = Rt.lazyState(
    () => UseState(this.initialCount),
    this,
  );

  CountController([this.initialCount = 0]) {
    UseEffect(() {
      print("Count: ${uCount.value}");
    }, [uCount]);
  }
}

In the example above, the uCount state is declared lazily using the late keyword. To bind the state to the CountController instance, the Rt.lazyState method is used, passing the state creation function and the dependency instance as arguments. This ensures that when uCount is accessed, it will be automatically bound to the CountController instance.

Manual binding

While automatic binding simplifies state management, there may be scenarios where you need to manually bind the state to a dependency. Manual binding provides greater control over how and when the state is associated with the dependency.

To manually bind a state to a dependency, you need to explicitly link the state within the dependency using the bind method of the state, e.g.:

count_controller.dart

class CountController {
  late final uCount = UseState(this.initialCount);

  final int initialCount;

  CountController([this.initialCount = 0]) {
    count.bind(this);
  }
}

In the example above, the uCount state is declared lazily using the late keyword. To manually bind the state to the CountController instance, the bind method is called within the constructor, passing the dependency instance as an argument. This ensures that the uCount state is associated with the CountController instance, e.g.:

Note

Manual binding and lazy state binding serve different purposes. Manual binding is useful when you need precise control over the state binding process, while lazy binding is suitable when you want the state to be initialized only when it is first accessed. Choose the appropriate approach based on your specific requirements.

Automatic unbinding

When a dependency is deleted, the associated state is automatically disposed of. This automatic unbinding mechanism simplifies state management and reduces the risk of memory leaks or resource wastage.

In the example below, the uCount state is automatically disposed of when the CountController instance is deleted, ensuring that resources are released efficiently:

main.dart

import "./count_controller.dart";

void main() {
  final controller = Rt.create(() => CountController(10));
  controller.uCount.value += 2; // Count: 12
  Rt.delete<CountController>();
  controller.uCount.value += 3; // Error: "Can't update when it's been disposed"
}

Manual unbinding

In some cases, you may need to manually unbind a state from a dependency. Manual unbinding provides greater control over when the state is released and can be useful in scenarios where you want to detach the state temporarily or permanently.

To manually unbind a state from a dependency, you can use the unbind method of the state, e.g.:

count_controller.dart

class CountController {
  late final uCount = UseState(this.initialCount);

  final int initialCount;

  CountController([this.initialCount = 0]) {
    count.bind(this);
  }

  void dispose() {
    count.unbind(this);
  }
}

Caution

While manual unbinding provides greater control, improper use can lead to memory management issues and increase the risk of errors. It is recommended to use automatic unbinding whenever possible, as it simplifies the process and reduces the likelihood of introducing memory leaks or failing to release resources properly.

Manual unbinding should be used cautiously and only when absolutely necessary. Additionally, developers must ensure that they keep track of the unbinding process to avoid leaving unused states in memory, which could negatively affect performance and resource utilization.