La aplicación ahora enumerará todos los elementos de una lista predefinida, permitirá al usuario marcar cualquiera de ellos como completo y actualizará la lista apropiadamente. Sin embargo, no hay persistencia para los cambios. Así que, si el usuario actualiza el navegador, la lista vuelve a la lista original del archivo JSON.
Necesitamos una API que pueda utilizarse para recuperar la lista actual de artículos y actualizarla. La creación de una API real está fuera del alcance de esta guía, por lo que utilizaremos una API simulada que almacene los datos en un almacenamiento local, pero que se desarrollará utilizando promesas para que pueda ser fácilmente reemplazada por llamadas a una API «real» en el futuro.
Este simulacro de API necesitará dos funciones: una para obtener la lista de artículos y otra para actualizar un artículo para que esté completo y devolver la lista actualizada:
1234567891011121314151617181920212223const storageKey ="TODO_ITEMS";const delayMs =1000;functiongetFromStorage(){const fromStorage =localStorage.getItem(storageKey);return fromStorage ?JSON. parse(fromStorage):[];}functionget(){returnnewPromise(resolve={{soluciones};{setTimeout(()={solución(getFromStorage()), delayMs);});}functioncomplete(id){returnnewPromise(resolve={soluciones};{const items =getFromStorage();const updatedItems = items. map(item={[item.id=== id ?{...item, complete:true}: item));localStorage.setItem(storageKey,JSON.stringify(updatedItems));setTimeout(()=;resolve(updatedItems), delayMs);});}javascript
Cuando se accede a una API a través de una red, se suele utilizar una biblioteca como fetch o axios que devuelven datos en una promesa. Por lo tanto, estas funciones simuladas de la API esperan un segundo – para simular la latencia de la red – y también devuelven sus datos en una promesa. La función get devuelve la lista de elementos en la clave de almacenamiento local o, si no hay nada allí, una lista vacía. La función complete obtiene la lista de elementos, los actualiza de la misma manera que la función completeItem desarrollada anteriormente, escribe la lista actualizada en el almacenamiento local y la devuelve en la promesa.
La importación del archivo original json puede ahora ser eliminada y el estado de los elementos puede ser inicializado con una matriz vacía, como esta:
1const[items, setItems]=React.useState([]);
javascript
En lugar de obtener la lista inicial de elementos del archivo json, la aplicación debería utilizar ahora la función API get. Para ello, se necesita una función que llame a la API, espere los datos y luego establezca el estado:
1234asyncfunctionloadItems(){const todoItems =await todoApi.get();setItems(todoItems);}javascript
Esta función utiliza el operador de espera para llamar a la función de obtención y esperar el resultado; una vez que se devuelve el resultado se actualiza el estado. Esta función necesita ser llamada cuando se inicia la aplicación y la forma de hacerlo es con el gancho de efectos. Cuando se llama con un array vacío como dependencias, useEffect ejecutará el efecto cuando el componente se monte, que es exactamente lo que se necesita, así que este código puede ser añadido a nuestro componente para cargar los elementos:
1React.useEffect(()={{{{cargar artículos();},[]);javascript
Ahora, cuando la aplicación se inicie, no renderizará nada en los elementos durante un segundo y luego renderizará los elementos de la lista recibidos de la API. Deberíamos dar al usuario una indicación de que algo está sucediendo mientras estamos recibiendo los elementos de la API. Esto se puede hacer añadiendo un estado de carga al componente que se establece en true antes de llamar a get y se establece en false cuando se devuelven los datos. Cuando se establece en true, se muestra un mensaje de carga y cuando se establece en false, se muestra la lista de elementos.
Esto significa añadir un estado y cambiar la función de los elementos de carga, así:
1234567const[cargando, setLoading]=React.useState(false);asyncfunctionloadItems(){setLoading(true);const todoItems =await todoApi.get();setItems(todoItems);setLoading(false);}javascript
Además, al completar un elemento se debe llamar ahora la función API, en lugar de sólo actualizar el estado desde el interior del componente: se debe cambiar la función de elemento completo:
1234asyncfunctioncompleteItem(id){const todoItems =await todoApi.complete(id);setItems(todoItems);}javascript
Los usuarios pueden ahora hacer clic en un elemento para configurarlo como completo y la lista se actualizará para mostrar el elemento como completo.