Obteniendo datos en tu aplicación React

Spanish (Español) translation by steven (you can also view the original English article)

React es posiblemente la biblioteca más popular para crear aplicaciones web interactivas. Sin embargo, React no es un framework web completo. Se centra en la parte de la vista del venerable modelo MVC.

Existe todo un ecosistema de React que aborda otros aspectos. En este tutorial, aprenderás sobre uno de los elementos más básicos de cualquier aplicación web: cómo obtener datos para mostrar. Esto no es trivial. Hay varios lugares en la jerarquía de componentes de React donde puedes obtener datos. Cuándo buscar datos es otra preocupación. También debes considerar qué tecnología utilizar para obtener tus datos y dónde almacenarlos.

Al final de este tutorial, tendrás una idea clara de cómo funciona la búsqueda de datos en React, los pros y los contras de los diferentes enfoques y cómo aplicar este conocimiento a tus aplicaciones React.

Empezando

Creemos un esqueleto para nuestra aplicación React con create-react-app:

> create-react-app react-data-fetcher

El resultado es una estructura de directorios bastante elaborada. Lee el excelente archivo README si no estás familiarizado con create-react-app.

Crear un servidor simple

Creé un servidor simple para almacenar y entregar notas de autor. No es el enfoque de este tutorial, y su función es proporcionar una API remota para demostrar cómo obtener datos con React. Solo para satisfacer tu curiosidad, es una aplicación de Python 3 basada en el framework hug y usa Redis como almacenamiento persistente.

La API es extremadamente simple. Hay un único punto final, /quotes. Devuelve todas las notas de autor almacenadas en respuesta a una solicitud HTTP GET, y puedes agregar nuevas notas de autor enviando una solicitud HTTP POST.

El código fuente completo está disponible en GitHub.

Descripción general de la aplicación de demostración

La aplicación de demostración es una aplicación React que se comunica con el servicio de notas de autor, muestra todas las notas de autor y te permite agregar nuevas notas.

Aquí hay una captura de pantalla:

La estructura de la aplicación es muy sencilla. Comencé con un esqueleto creado por create-react-app y agregué dos componentes en el subdirectorio src: QuoteList y AddQuoteForm. Aquí está la estructura del directorio (excluyendo node_modules):

~/git/react-data-fetcher > tree -I node_modules -L 2
.
├── README.md
├── README2.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── AddQuoteForm.css
│   ├── AddQuoteForm.js
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── QuoteList.js
│   ├── index.css
│   ├── index.js
│   └── registerServiceWorker.js
└── yarn.lock

2 directories, 16 files

El código fuente completo está disponible en GitLab.

Visualización de las notas de autor

El componente funcional QuoteList muestra una lista de citas como una lista de viñetas. Espera una matriz de cadenas:

import React from 'react'

const QuoteList = ({quotes}) =>
  quotes.map(quote => <li key={quote}>{quote}</li>)


export default QuoteList

Es un componente secundario del componente principal de la aplicación.

Obtener datos con la API Fetch

La API de recuperación es una API basada en promesas que devuelve un objeto de respuesta. Para llegar al contenido JSON real, debes invocar el método json() del objeto de respuesta.

  fetchQuotes = () => {
    this.setState({...this.state, isFetching: true})
    fetch(QUOTE_SERVICE_URL)
      .then(response => response.json())
      .then(result => this.setState({quotes: result, 
                                     isFetching: false}))
      .catch(e => console.log(e));
  }
}

Colocación de tu código para obtener datos

React se trata, por supuesto, de componentes. La cuestión de dónde colocar el código de obtención de datos es importante. Si factorizas bien tu código, tendrás muchos componentes genéricos y algunos componentes específicos de la aplicación. React y JavaScript en general son muy flexibles, por lo que es posible inyectar lógica en cualquier lugar.

Obtener notas desde una API REST requiere algún tipo de sondeo, ya que quiero que las notas de autor estén siempre actualizadas. Pero la obtención inicial también es importante. Los componentes de React tienen métodos de ciclo de vida en los que puedes implementar lógica que se ejecutará en un momento determinado. El método componentDidMount() se activa cuando se puede acceder al componente y modificar su estado. Es el lugar perfecto para iniciar la búsqueda de datos.

Así es como se ve:

1	componentDidMount() {
2	this.fetchQuotes()
3	}

Si realmente deseas reducir el tiempo para la primera vista, puedes considerar usar el componenteWillMount() para iniciar tu búsqueda asíncrona, pero corres el riesgo de que la búsqueda se complete antes de que se monte el componente. No recomiendo este enfoque.

Consulta Dominar los métodos del ciclo de vida de React para obtener más detalles.

Selecciona la frecuencia con la que se obtienen los datos

La obtención inicial en componentDidMount() es excelente, pero quiero actualizar las notas de autor con frecuencia. En una API basada en REST, la única solución es sondear periódicamente el servidor. El servicio de cotizaciones es muy básico y siempre devuelve todas las cotizaciones.

Los servicios más escalables proporcionarán una forma de buscar actualizaciones o incluso usar HTTP if-modified-since o eTag. Nuestra aplicación de demostración solo obtiene todo cada cinco segundos iniciando un temporizador en componentDidMount() y limpiando en componentWillUnmount():

  componentDidMount() {
    this.fetchQuotes()
    this.timer = setInterval(() => this.fetchQuotes(), 5000);
  }
  
  componentWillUnmount() {
    this.timer = null;
  }  

La duración del sondeo es una decisión específica de la aplicación. Si necesitas actualizaciones en tiempo real y/o el sondeo está estresando demasiado el back-end, considera usar WebSockets en lugar de REST.

Manejo de la obtención de datos de larga duración

A veces, obtener los datos puede llevar mucho tiempo. En ese caso, mostrar una barra de progreso o una animación brillante para que el usuario sepa lo que está sucediendo puede contribuir mucho a la experiencia del usuario. Esto es especialmente importante cuando el usuario inicia la búsqueda de datos (por ejemplo, haciendo clic en un botón de búsqueda).

En la aplicación de demostración, simplemente muestro un mensaje que dice "Obteniendo notas de autor..." mientras se realiza una búsqueda. En el método render() del componente principal de la aplicación, utilizo la representación condicional comprobando el miembro state.isFetching.

  render() {
    const title = 'Quotes for ya!'
    let now = new Date()

    return (
      <div className='App'>
        <h2 className='App-title'>{title}</h2>
        <p>{this.state.isFetching ? 'Fetching quotes...' : ''}</p>
        <QuoteList quotes={this.state.quotes} />
        <AddQuoteForm quote_service_url={QUOTE_SERVICE_URL}/>
      </div>
    );
  }

El método fetchQuotes() se encarga de actualizar state.isFetching inicializándolo en verdadero cuando comienza y volviendo a establecerlo en falso cuando recibe las notas de autor:

  fetchQuotes = () => {
    this.setState({...this.state, isFetching: true})
    fetch(QUOTE_SERVICE_URL)
      .then(response => response.json())
      .then(result => this.setState({quotes: result, 
                                     isFetching: false}))
      .catch(e => console.log(e));
  }
}

Manejo de errores

Hago el mínimo de manejo de errores aquí registrando los errores detectados en la consola. Dependiendo de tu aplicación, puedes invocar alguna lógica de reintento, notificar al usuario o mostrar algún contenido de respaldo.

Obtener un API frente a Axios

La API de búsqueda tiene un par de trampas. Requiere el paso adicional de extraer el JSON de una respuesta. Tampoco detecta todos los errores. Por ejemplo, 404 se devolverá como una respuesta normal. Tendrás que verificar el código de respuesta y también lidiar con los errores de red que se detectan.

Entonces tendrás que lidiar con los errores en dos lugares. Pero puedes usar la biblioteca axios.js para abordar estos problemas y tener un código un poco más conciso a cambio de agregar una dependencia externa. Así es como se ve el código con axios:

  fetchQuotes = () => {
    this.setState({...this.state, isFetching: true})
    axios.get(QUOTE_SERVICE_URL)
      .then(response => this.setState({quotes: response.data, 
                                       isFetching: false}))
      .catch(e => console.log(e);
  }

Esto no parece mucho, pero ayuda. El código para agregar una nueva cita es mucho más conciso con axios. Aquí está la versión de recuperación:

  handleSubmitWithFetch = event => {
    let data = new FormData()
    data.append('quote', this.state.quote)
    fetch(this.props.quote_service_url, 
          {method: 'POST', body: data})
      .then(response => response.json())
      .catch(e => console.log(e));

    event.preventDefault();
  }

Y aquí está la versión axios:

  handleSubmit = event => {
    axios.post(this.props.quote_service_url, 
               {'quote': this.state.quote})
      .then(r => console.log(r))
      .catch(e => console.log(e));

    event.preventDefault();
  }

Conclusión

En este tutorial, aprendiste cómo obtener datos de forma asincrónica en una aplicación React. Hablamos sobre los métodos relevantes del ciclo de vida, el sondeo, los informes de progreso y el manejo de errores.

Analizamos dos bibliotecas basadas en promesas: la API fetch y axios.js. Ahora, sal y crea increíbles aplicaciones React que accedan a API remotas.

En los últimos años, React ha ganado popularidad. De hecho, tenemos varios artículos en el mercado que están disponibles para su compra, revisión, implementación, etc. Si estás buscando recursos adicionales sobre React, no dudes en consultarlos.