Patrón de Diseño Container-Presenter: Separación de Lógica y Presentación

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.