Uso de la biblioteca React-Async para la obtención de datos declarativos

Introducción

Al obtener datos en una aplicación JavaScript, async-awaitpodemos utilizar la programación síncrona imperativa para obtener datos. Esto significa que nuestro código describirá de manera imperativa cómo funcionará el programa y lo hará a lo largo de un único hilo de operaciones. React, por otro lado, es una biblioteca que crea interfaces de usuario de manera declarativa. Esto suele considerarse un método opuesto a la programación imperativa, en la que el desarrollador describe lo que quiere que haga el programa, en lugar de cómo quiere que se comporte. La combinación de React y, async-awaitpor lo tanto, conduce a un patrón mixto en el que tenemos tanto código imperativo (para la obtención de datos) como código declarativo (para la composición de la interfaz de usuario).

React-async proporciona una API declarativa para realizar cualquier llamada a la API REST mediante un único componente React, lo que permite utilizar la programación declarativa en toda la aplicación. Se encarga de gestionar errores, resolver promesas y volver a intentar promesas, y se ocupa del estado asincrónico local.

En este artículo, explicaremos cómo la biblioteca React-Async nos ayuda a obtener datos y ejecutar algunas demostraciones de componentes y funciones auxiliares.

Obtención de datos de forma declarativa con React-Async

Dividamos nuestro tema en dos partes: Obtención de datos declarativa y llamadas API asincrónicas en React.

La obtención de datos declarativa es un enfoque que se utiliza para llamar a las API, en el que declaras lo que quieres que hagan sin preocuparte por todo lo relacionado con la llamada. Es lo opuesto al enfoque imperativo, en el que también debes detallar los pasos que quieres que siga el programa.

Dado que JavaScript es sincrónico de manera predeterminada y tiene un solo subproceso, cuando queremos renderizar un componente que muestra algunos datos provenientes de una llamada asincrónica en versiones anteriores de React, se deben usar clases. Tuvimos que usar los métodos del ciclo de vida del componente para asegurarnos de que la llamada se realizara cuando se montara el componente y luego usamos el estado local para administrar el estado de carga.

Las solicitudes asincrónicas esperarán a que se responda una solicitud mientras el resto del código continúa ejecutándose. Luego, cuando llegue el momento adecuado, una devolución de llamada activará estas solicitudes asincrónicas.

Demostremos esto realizando una llamada a un punto final para obtener una lista de precios de divisas:

import React, { Component } from 'react';import axios from 'axios';class App extends Component {  state = {    data: [],    error: '',  };  componentDidMount() {     axios      .get('https://api.coinmarketcap.com/v1/ticker/?limit=1')      .then(res = this.setState({ data: res.data }))      .catch(error = this.setState({ error }));  }  render () {    return (      div className="App"        ul          {this.state.data.map(el = (            li              {el.name}: {el.price_usd}            /li          ))}        /ul      /div    );  }}export default App;

Nota: Instale axios escribiendo 'npm install axios' en su terminal.

Puedes ver este código en vivo usando esta página de CodeSandbox.

Aquí realizamos nuestra llamada a la API en la función componentDidMount para asegurarnos de que se ejecute tan pronto como se cargue el componente. Podemos entender nuestros datos solo después de realizar los siguientes pasos:

• Primero, hacemos una solicitud a la API.
• Luego recibimos una respuesta.
• Extraemos datos de la respuesta.
• Finalmente, almacenamos los datos en nuestro estado local.

En caso de error durante el proceso de obtención de datos:

• Detectamos el error.
• Luego almacenamos los datos en nuestro estado local.

Aquí describimos explícitamente cómo y qué hacer en cada paso para obtener los datos. Aunque la sintaxis y las funciones funcionan correctamente, el código se puede reescribir para que sea más eficiente y en menos líneas si se escribe de forma declarativa. Reescribámoslo usando React-Async.

Primero, debes instalar el paquete escribiendo npm install react-asyncen tu terminal. Luego escribe tu componente con el siguiente código:

import React, { Component } from 'react';import Async from 'react-async';const loadJson = () =  fetch("https://api.coinmarketcap.com/v1/ticker/?limit=1")    .then(res = (res.ok ? res : Promise.reject(res)))    .then(res = res.json())const App = () = (  Async promiseFn={loadJson}    {({ data, error, isLoading }) = {      if (isLoading) return "Loading..."      if (error) return ``Something went wrong: ${error.message}``      if (data)        return (          div             {data.map(el = (              li                {el.name}: {el.price_usd}              /li             ))}          /div        )      return null    }}  /Async)export default App;

Si usas CodeSandbox, agrega React-Async desde el menú de dependencias. Si quieres ver este código en vivo, echa un vistazo al ejemplo de React-Async en CodeSandbox.

Aquí hemos reescrito nuestro componente usando ganchos en lugar de clases. Primero creamos una función loadJsonpara manejar la obtención de datos. Luego, dentro de nuestro componente App, utilizamos el Asynccomponente disponible a través de la biblioteca React-Async.

Una vez resuelta nuestra promesa, disponemos de recursos para manejar diferentes escenarios.

• isLoadingestá disponible para que podamos mostrar un mensaje fácil de usar mientras los datos aún no se han cargado.
• errorEstá disponible en caso de que se produzca un error durante la búsqueda.
• dataSon los datos reales que se devuelven una vez finalizada la obtención.

En este ejemplo, ya no tenemos que usar clases o métodos de ciclo de vida para cargar nuestros datos, ni necesitamos decirle a React-Async cómo procesar los datos o cómo actualizar nuestro estado.

React-Async administra el estado de carga a través de la isLoadingpropiedad fallback, que se procesa hasta que dataestá lista para procesarse, es decir, cuando la llamada asincrónica dependiente se resuelve y devuelve los datos.

Componentes auxiliares

React-Async viene con varios componentes auxiliares que hacen que tu JSX sea más declarativo y menos desordenado. Cada uno de los componentes auxiliares solo mostrará sus elementos secundarios cuando corresponda. Podemos reescribir nuestra función App para que se vea así:

const App = () = (  Async promiseFn={loadJson}    Async.LoadingLoading.../Async.Loading    Async.Resolved      {data = (        div             {data.map(el = (            li              {el.name}: {el.price_usd}            /li          ))}        /div      )}    /Async.Resolved    Async.Rejected      {error = `Something went wrong: ${error.message}`}    /Async.Rejected  /Async)

Mira este ejemplo en CodeSandbox.

En este ejemplo, hemos utilizado las funciones Async.Loading, Async.Resolvedy Async.Rejectedpara simplificar nuestro código y hacerlo más legible. Los componentes auxiliares proporcionados por React-Async pueden tomar un elemento React o una función como elementos secundarios. Cuando proporcionas una función, recibirás propiedades de renderizado que puedes usar en tu componente.

Aplicación de prueba de perfil de usuario con funciones auxiliares

Vamos a crear una pequeña aplicación de perfil de usuario que utilice algunas funciones auxiliares adicionales. Actualice su componente con el siguiente código:

import React, { Component } from 'react';import Async from 'react-async';const loadUser = ({ userId }) =  fetch('`https://reqres.in/api/users/${userId}'`)    .then(res = (res.ok ? res : Promise.reject(res)))    .then(res = res.json())const UserPlaceholder = () = (  div    divUser Details Loading/div  /div)const UserDetails = ({ data }) = (  div className="details"    img className="avatar" src={data.data.avatar} /    div      {data.data.first_name} {data.data.last_name}    /div  /div)const App = () = (    Async promiseFn={loadUser} userId={1}      Async.Pending        UserPlaceholder /      /Async.Pending      Async.Fulfilled{data = UserDetails data={data} /}/Async.Fulfilled      Async.Rejected{error = p{error.message}/p}/Async.Rejected    /Async)export default App;

Este es el código en CodeSandbox.

Repasemos las funciones que declaramos:

• loadUser:Definimos esta función para gestionar la obtención de datos. Toma una propiedad ( userId) y consulta la API en función del ID.
• userPlaceholder:Este es el componente de respaldo que se mostrará cuando la promesa aún no se haya resuelto, es decir, cuando los datos no hayan terminado de cargarse.
• userDetails: Este componente se encarga de la visualización real de los datos del usuario. Recibe los datos a través de propiedades y solo se procesa cuando se ha resuelto la promesa.
• Async.Pending, Async.Fulfilled, y Async.Rejected: Son funciones para simplificar nuestro código y hacerlo más legible.

Conclusión

En este tutorial, exploramos cómo usar la biblioteca React-Async para ayudarnos a obtener datos de manera declarativa. También analizamos algunas de las funciones auxiliares que ofrece. Para obtener más información sobre React-Async, consulte la documentación de React-Async en GitHub.