Obtención de datos del almacenamiento en React Router

Puedes ver que por ahora nuestra aplicación es estática. En esta y las siguientes lecciones comenzaremos a darle vida. Ya en las próximas lecciones podremos añadir productos a la lista usando React Router.

En esta lección, para empezar, nos ocuparemos de obtener datos del almacenamiento. Para el almacenamiento local de datos usaremos localForage (puedes leer sobre su uso y ventajas en la documentación) - un análogo de LocalStorage, compatible con todos los navegadores modernos. En realidad es una combinación de varias tecnologías de almacenamiento. Con un uso relativamente sencillo, permite almacenar grandes volúmenes de datos, y de diferentes tipos, incluyendo imágenes. Vamos a instalarlo en nuestro proyecto. Escribe en la terminal:

npm i localforage

Reiniciemos nuestra aplicación. En la carpeta src crearemos el archivo forStorage.js, que contendrá las funciones para trabajar con el almacenamiento.

Entonces, comencemos con la función de carga de productos desde el almacenamiento. Añadamos en forStorage.js la importación de la biblioteca y escribamos la función getProducts para obtener los productos:

import localforage from 'localforage';

export async function getProducts() {
	await someNetwork();
	let products = await localforage.getItem('products');
	if (!products) products = [];
	return products;
}

Abajo, después del código de la función, también añadiremos el código para someNetwork, simulando retrasos de red (hasta 0.7 segundos) para el funcionamiento normal de las funciones. Si nuestro producto está "en caché", entonces en las funciones para trabajar con el almacenamiento no habrá retraso, si no, sí habrá retraso, verás más adelante cómo funciona esto:

let someCache = {};

async function someNetwork(key) {
	if (!key) {
		someCache = {};
	}

	if (someCache[key]) {
		return;
	}

	someCache[key] = true;

	return new Promise((res) => {
		setTimeout(res, Math.random() * 700);
	});
}

Toma la aplicación que creaste en las tareas de lecciones anteriores. Instala en la aplicación el almacenamiento localForage.

Usando los materiales de la lección, crea el archivo forStorage.js y escribe en él la función getStudents para obtener los datos de los estudiantes del almacenamiento.