El patron de diseño Functions as Children en Reactjs se basa en crear componentes que reciban funciones, a las que por medio de atributos personalizables podamos obtener mucho más control en la implementación y lógica de nuestra aplicación.
Arquitectura en aplicaciones de Reactjs
Cuando creamos el frontend de nuestras aplicaciones, creamos dos tipos de componentes:
Smart Components (componentes inteligentes): Deben controlar la lógica de nuestra aplicación. En realidad no muestran ningún contenido visual. Se concentran en cómo funciona nuestra aplicación. Gracias a ellos nuestra aplicación estará lista para mostrar el contenido de la mejor forma posible.
Dumb Components (componentes tontos, o no tan inteligentes): Son los encargados de la UI. Su función es mostrar al usuario el contenido de nuestra aplicación. No se preocupan por el funcionamiento de la aplicación. Solo se preocupan por cómo se ve.
Por qué usar Functions as Children en Reactjs
Gracias a esta arquitectura podemos construir aplicaciones mucho mas organizadas. Pero hay un problema.
¿Cómo usamos la lógica de los Smart Components para que los Dumb Componentes muestren el contenido de la mejor forma posible? ¿Cómo separamos la lógica de rendering del resto de inteligencia en nuestro Smart Component?
Aquí entra Functions as Children.
Con esta nueva forma de crear componentes, cambiaremos un poco nuestros Smart Components para comunicarnos mucho más fácil con los Dumb Components. Lo haremos gracias a un nuevo componente que se encargara de comunicar el resto de componentes de nuestra aplicación. El BUS Component.
A traer perritos!
Para que entendamos mejor, crearemos una aplicación para hacer Fetch a una API. Esta aplicación tendrá una vista para cuando el requerimiento este cargando. Una vista por si hay error. Y por su puesto una vista para mostrar los datos que hayan cargado de manera exitosa.
Manos a la obra!
Comencemos con nuestro Smart Component. Haremos la lógica del Fetch a la API, usando la API de perritos de Dog CEO 😄.
Lo primero es crear un estado inicial. Necesitamos saber cuándo la aplicación esta cargando, cuándo tenemos un error y cuándo hemos completado nuestra petición de manera exitosa:
class APIFetcher extends React.Component {
state = {
isLoading: true, // nuestra aplicación empezara a cargar desde el principio
hasError: false,
dogImage: null,
};
}
Ahora creemos la lógica de la petición. Haremos una consulta a una imagen aleatoria, cada vez que hagamos un request a esta url tendremos un perrito diferente:
class APIFetcher extends React.Component {
// ...
fetchDogs = async () => {
// Intentemos hacer el request:
try {
const response = await fetch('https://dog.ceo/api/breeds/image/random');
const json = await response.json();
this.setState({
dogImage: json.message // "message" es la imagen del perrito (URL)
isLoading: false, // ya tenemos la imagen! no estamos cargando :D
});
}
// Sí algo no funciona, tenemos un error... Hay que avisarle al usuario:
catch(error) {
this.setState({
hasError: true,
isLoading: false, // es mejor decirle al usuario que hay un error a dejarlo esperando D:
});
}
}
componentDidMount() {
this.fetchDogs(); // Queremos que los perritos empiecen a cargar lo antes posible!
}
}
Ahora, vamos a romper un poco las reglas. Vamos a usar el smart component que estamos construyendo, y vamos a prepararlo para integrarse con nuestro BUS Component.
class APIFetcher extends React.Component {
// ...
render() {
const { dogImage, isLoading, hasError } = this.state;
return this.props.children({ dogImage, isLoading, hasError }); // Eso es todo! Que fácil verdad?
}
}
¿Por qué estamos pasando las props de forma tan rara? Así es como funciona Functions as Children.
En vez de pasar la lógica del Smart Component por medio de props (a lo que estamos acostumbrados cuando usamos Reactjs) pasaremos las props por medio de una función. Esto permitirá que el BUS Component que vamos a crear pueda comunicar el Smart Component con los Dumb Components. Así, podremos construir una UI que responda a los cambios de estado de nuestra aplicación.
El BUS Component
Como ya sabes, el BUS Component sera el encargado de, con la lógica de nuestro Smart Component, hacer que nuestros Dumb Components manejen la UI de nuestra aplicación de la mejor forma posible:
function DogImage() {
return (
{/* envolveremos nuestros componentes en el smart component */}
<APIFetcher>
{({ dogImage, isLoading, hasError }) => {
// BOOOOM! Tenemos nuestra data! Ahora podemos manejar los estados
// de nuestra aplicación como queramos...
if (isLoading) return <LoadingComponent/>;
if (hasError) return <ErrorComponent/>;
// No hay errores. No esta cargando. Tenemos nuestro perrito!!
return <img src={dogImage} />;
}}
</ApiFetcher>
);
}
BOOM!!
Hemos creamos nuestro BUS Component y adaptamos nuestro Smart Component para controlar los Dumb Components. Cumplimos el propósito de nuestra aplicación y aprendimos a usar Functions as Children. Ahora es TU turno de probar Functions as Children. ¿Qué tal te ha parecido? Cuéntanos en los comentarios que tanto te ayudo este tutorial!
Estaremos encantados de escuchar tus aportes ❤️.
Otros Links
- React Docs: Render Props - A simple guide to introducing the Funcions as Children pattern.
- React Data Fetching - Declarative data fetching for React using Functions as Children.
- Introducing React Apollo 2.1 - A new render prop API, improved docs, and more.
- Awesome React Render Props - List of React components with render props
Curso de React.js 2017
