Hooks

Los hooks son clases con la capacidad de usar estados y gestionar efectos secundarios. Son un concepto fundamental en Reactter y se utilizan para encapsular la lógica que se puede reutilizar en cualquier parte de la aplicación.

API

Reactter provee los siguientes hooks:

• UseState
• UseAsyncState
• UseReducer
• UseCompute
• UseEffect
• UseDependency

¿Cómo funciona?

Los hooks en Reactter son clases que extienden de RtHook es responsable de vincular el hook a otros hooks y estados, y de gestionar el ciclo de vida del hook.

Los hooks en Reactter son esencialmente entidades con estado porque RtHook hereda de RtState esta herencia permite a los hooks gestionar tanto el estado como los métodos del ciclo de vida de manera eficiente.

Para gestionar estos aspectos, los Hooks proporcionan lo siguiente:

Propiedades y métodos heradados de RtState

• debugLabel: Una cadena que representa la etiqueta del estado para propósitos de depuración.
• debugInfo: Un Map que contiene información de depuración sobre el estado.

• update : Ejecuta una función callback y notifica a sus observadores que el estado ha cambiado. Cuando se invoca, emite dos eventos lifecycle para señalar la transición de estado:
  • Lifecycle.willUpdate se emite primero, indicando la actualización inminente.
  • Lifecycle.didUpdate se emite una vez que el proceso de actualización se ha completado.
• notify : Fuerza al estado a notificar a sus observadores. A diferencia de update , sólo emite el evento Lifecycle.didUpdate, ya que no implica ningún paso previo a la notificación.
• bind : Establece una conexión entre el estado y una instancia específica. Esta conexión permite a la instancia actualizarse de forma reactiva en función de los cambios en el estado. Al vincular el estado, la instancia es notificado de los cambios en el estado y puede reflejar adecuadamente esos cambios en su comportamiento.
• unbind : Libera la conexión entre el estado y la instancia. Al desvincularse, la instancia dejará de recibir actualizaciones del estado. Esto puede ser útil cuando una instancia ya no está utilizando activamente el estado o cuando necesita desvincularse del estado temporal o permanentemente.
• dispose : Es responsable de limpiar el estado y cualquier observador o recurso asociado. Disponer del estado garantiza que se libere correctamente y que ya no consuma memoria o recursos de procesamiento innecesariamente.

Nota

Mientras que los métodos bind , unbind y dispose se utilizan normalmente para gestionar el ciclo de vida de un estado, Reactter maneja esto automáticamente, cuando el estado es declarado dentro de una instancia que existe dentro del contexto de Reactter vía dependecy injection, por lo que no necesitas preocuparte por ello(Apendas más acerca de la vinculación del estado a la dependencia).

Hook personalizado

Reactter proporciona una forma de crear hooks personalizados para encapsular la lógica que se puede reutilizar en cualquier parte de la aplicación.

Hay varias ventajas en usar hoks personalizados:

• Reusabilidad: para usar el mismo hook una y otra vez, sin necesidad de escribirlo dos veces.
• Código limpio: extraer parte del código en un hook proporcionará una base de código más limpia.
• Mantenibilidad: más fácil de mantener. si necesita cambiar la lógica del hook, solo necesita cambiarla una vez.

Crear un hook personalizado

Para crear un hook personalizado, debes crear una clase que extienda de RtHook y seguir la convención de nomenclatura con el prefijo Use .

Aquí tienes un ejemplo de un hook personalizado que gestiona el estado de un campo de texto:

import 'package:reactter/reactter.dart';
import 'package:flutter/widgets.dart';

class UseTextInput extends RtHook {
  // This line is REQUIRED!
  final $ = RtHook.$register;

  final controller = TextEditingController();

  String _value = '';
  String? get value => _value;

  @override
  initHook() {
    UseEffect(() {
      controller.addListener(() {
        update(() => _value = controller.text);
      });

      return controller.dispose;
    }, []);
  }
}

¡Atención!

Para crear un hook, debes registrarlo agregando la siguiente línea:

final $ = RtHook.$register;

Es importante tener en cuenta que los estados y hooks definidos por encima de esta línea no estarán vinculados al hook. Para evitar esto, se recomienda colocar esta línea como la primera línea en el cuerpo de la clase.

Como se muestra en el ejemplo anterior, podemos utilizar otros hooks como UseEffect para monitorear los cambios en el controlador del campo de texto y asegurarnos de que se elimine cuando el hook se destruya.

El método update se utiliza para establecer el _value interno en el texto actual del controlador, lo que mantiene el estado sincronizado con el campo de texto. Este método es parte de la clase RtHook que te permite actualizar el estado del hook.

Usar un hook personalizado

Los hook personalizados pueden ser llamados desde cualquier parte del código y acceder a su lógica compartida, por ejemplo:

• my_controller.dart
• my_custom_form.dart
• use_text_input.dart
• main.dart

import 'package:flutter_reactter/flutter_reactter.dart';
import 'use_text_input.dart';

class MyController {
  final firstNameInput = UseTextInput();
  final lastNameInput = UseTextInput();

  late final fullName = Rt.lazyState(
    () => UseCompute(
      () {
        final firstName = firstNameInput.value;
        final lastName = lastNameInput.value;

        return "$firstName $lastName";
      },
      [firstNameInput, lastNameInput],
    ),
    this,
  );
}

import 'package:flutter/material.dart';
import 'package:flutter_reactter/flutter_reactter.dart';
import 'my_controller.dart';

class MyCustomForm extends StatelessWidget {
  const MyCustomForm({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return RtProvider<MyController>(
      () => MyController(),
      builder: (context, myController, child) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("Custom hook example"),
          ),
          body: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                RtConsumer<MyController>(
                  listenStates: (myController) => [myController.fullName],
                  child: const Text(
                    "Full Name:",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  builder: (context, myController, child) {
                    return Row(
                      children: [
                        child!,
                        const SizedBox(width: 4),
                        Text(myController.fullName.value),
                      ],
                    );
                  },
                ),
                const SizedBox(height: 8),
                TextField(
                  decoration: InputDecoration(
                    hintText: "First Name",
                  ),
                  controller: myController.firstNameInput.controller,
                ),
                TextField(
                  decoration: InputDecoration(
                    hintText: "Last Name",
                  ),
                  controller: myController.lastNameInput.controller,
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

import 'package:reactter/reactter.dart';
import 'package:flutter/widgets.dart';

class UseTextInput extends RtHook {
  // This line is REQUIRED!
  final $ = RtHook.$register;

  final controller = TextEditingController();

  String _value = '';
  String? get value => _value;

  @override
  initHook() {
    UseEffect(() {
      controller.addListener(() {
        update(() => _value = controller.text);
      });

      return controller.dispose;
    }, []);
  }
}

import 'package:flutter/material.dart';
import 'my_custom_form.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyCustomForm(),
    );
  }
}

En el ejemplo anterior, el formulario recopila los datos ingresados en los campos de nombre y apellido, los combina en un nombre completo y muestra el resultado. MyController utiliza el hook UseTextInput (hook personalizado creado previamente) para capturar los valores de nombre y apellido.

El estado fullName se define mediante UseCompute , lo que permite calcular el nombre completo en función de los valores de firstNameInput y lastNameInput. Esto garantiza que el nombre completo se actualice automáticamente cada vez que se modifiquen las entradas