El patrón de diseño Container-Presenter permite organizar los componentes en una aplicación separando la lógica de negocio y la presentación visual. Este enfoque divide los componentes en dos tipos: los contenedores, que gestionan la lógica y el estado, y los presentadores, responsables únicamente de la visualización de datos sin involucrar lógica. A continuación, se explora cómo implementar este patrón para crear aplicaciones más organizadas y escalables.
¿Qué es un componente de tipo presentacional?
- Son componentes enfocados en mostrar datos recibidos a través de props, sin manejar lógica de negocio ni estado.
- Utilizan propiedades como
name, description e image para renderizar contenido.
- Su estructura es simple y se basa en recibir datos preprocesados, idealmente desde un componente contenedor.
Para el ejemplo, se crea un componente DataPresenter que muestra nombre, imagen y descripción. Los datos son pasados en forma de un objeto con ID, nombre, descripción e imagen, previamente definido como type DataItem en TypeScript.
¿Cómo crear un componente contenedor?
- El componente contenedor (
DataContainer) se encarga de la lógica de negocio, como realizar fetch de datos.
- Define un estado local para manejar los datos (
data) usando useState y controla los procesos de carga y error.
- Con el hook
useEffect, el componente realiza un fetch a un archivo JSON, y en caso de error, gestiona los mensajes correspondientes.
Para manejar el proceso, el contenedor inicializa un estado de loading y error, y actualiza data cuando el fetch es exitoso. También maneja las posibles fallas del fetch a través de un bloque try-catch.
¿Cómo se comunican el contenedor y el presentador?
- Una vez cargados, los datos del JSON son enviados al presentador mediante props.
- El contenedor usa
data.map para iterar los elementos, generando cada ítem con ID, name, description, y image.
- Al renderizar, el contenedor verifica los estados
loading y error, mostrando mensajes de carga o error en caso de ser necesario.
¿Cuáles son los beneficios del patrón Container-Presenter?
- Separación de responsabilidades: Evita que la lógica de negocio interfiera con el diseño visual.
- Mantenibilidad: Simplifica la modificación de componentes al tener funciones independientes.
- Escalabilidad: Facilita la expansión del código sin afectar la estructura del proyecto.
