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 state( RtState like 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.

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"
}

In the example above, the uCount state is accessed after creating the CountController instance, demonstrating that the state is bound to the dependency and can be manipulated directly from the instance. When the CountController instance is deleted, the state is automatically disposed of, ensuring that resources are released efficiently.

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 state binding).

Lazy state 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, e.g.:

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"
}

In the example above, the uCount state is accessed after creating the CountController instance, demonstrating that the state is bound to the dependency and can be manipulated directly from the instance. When the CountController instance is deleted, the state is automatically disposed of, ensuring that resources are released efficiently.

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.:

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"
}

In the example above, the uCount state is accessed after creating the CountController instance, demonstrating that the state is bound to the dependency and can be manipulated directly from the instance. When the CountController instance is deleted, the state is automatically disposed of, ensuring that resources are released efficiently.

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 state 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.