Gestión de Estado: Enfoque Reactivo y No Reactivo, Ejemplos Prácticos, Bloc, Riverpod

La gestión del estado es un aspecto crucial en el desarrollo de aplicaciones, y en este post exploraremos las diferencias entre los enfoques reactivos y no reactivos. Utilizaremos ejemplos prácticos para ilustrar los conceptos, centrándonos en la implementación de soluciones con Bloc y Riverpod en Flutter. También profundizaremos en la eficiencia de ambos enfoques y su impacto en el lado del usuario.

Enfoque Reactivo vs No Reactivo

Enfoque Reactivo

El enfoque reactivo en la gestión del estado se basa en la propagación automática de cambios. Cuando el estado cambia, los elementos relevantes se actualizan automáticamente. Este enfoque es eficiente en términos de rendimiento, reduciendo la necesidad de actualizaciones manuales y proporcionando una respuesta inmediata al usuario.

1
2
3
4
5
6
7
8
9

final counterStream = StreamController<int>();

// Agrega un listener
counterStream.stream.listen((value) {
  print('El contador es: $value');
});

// Actualiza el estado
counterStream.add(1);

Enfoque No Reactivo

El enfoque no reactivo requiere intervención manual para actualizar elementos cuando el estado cambia. Los objetos afectados no son notificados automáticamente de los cambios. Este enfoque puede implicar más complejidad en la gestión de actualizaciones y podría requerir más recursos en ciertas situaciones.

1
2
3
4
5
6
7
8
9

int counter = 0;

void updateCounter() {
  print('El contador es: $counter');
}

// Actualiza el estado manualmente
counter = 1;
updateCounter();

Ejemplos Prácticos con Bloc y Riverpod

Bloc (Componente Lógico de Negocios)

Bloc es un patrón de gestión del estado basado en eventos y estados. Los bloques separan la lógica de negocios de la presentación, asegurando una estructura limpia y mantenible. Este enfoque es eficiente en aplicaciones grandes donde es necesario gestionar flujos de datos complejos.

1
2
3
4
5
6
7
8

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
}

// Uso del bloc
final counterCubit = CounterCubit();

Riverpod

Riverpod es una biblioteca de gestión del estado basada en Provider, con una sintaxis clara y declarativa. En este ejemplo, usamos Riverpod para crear un estado de contador. Su estructura clara y el manejo eficiente de las dependencias contribuyen a una mayor legibilidad y mantenibilidad del código.

1
2
3
4
5
6

final counterProvider = Provider<int>((ref) {
  return 0;
});

// Uso de Riverpod
final counter = ref.watch(counterProvider);

Impacto en la Eficiencia y el Lado del Usuario

La elección entre enfoques reactivos y no reactivos tiene un impacto significativo en la eficiencia de la aplicación y la experiencia del usuario. Los enfoques reactivos tienden a proporcionar respuestas más inmediatas, reduciendo el riesgo de latencia y mejorando la percepción del usuario. Por otro lado, los enfoques no reactivos pueden requerir acciones manuales para actualizar la interfaz, lo que podría causar retrasos en la visualización de cambios.

Conclusión

La elección entre un enfoque reactivo y no reactivo depende de las necesidades específicas del proyecto y de consideraciones sobre la eficiencia y la experiencia del usuario. Experimenta con ambos enfoques y evalúa cuál se adapta mejor a tu aplicación. En la gestión del estado en Flutter, soluciones como Bloc y Riverpod ofrecen enfoques distintos, permitiéndote elegir la mejor estrategia para tu caso de uso.

¡Feliz codificación!