Récupération des données du stockage dans React Router

Vous voyez que pour l'instant notre application est statique. Dans cette leçon et les suivantes, nous allons commencer à la rendre vivante. Dès les prochaines leçons, nous pourrons ajouter des produits à la liste en utilisant React Router.

Dans cette leçon, pour commencer, nous allons nous occuper du récupération des données du stockage. Pour le stockage local des données, nous utiliserons le stockage localForage (vous pouvez lire sur son utilisation et ses avantages dans la documentation) - un équivalent de LocalStorage, qui est supporté par tous les navigateurs modernes. Il s'agit en fait d'une union de plusieurs technologies de stockage. Avec une utilisation relativement simple, il permet de stocker de grands volumes de données, et de types différents, y compris des images. Installons-le dans notre projet. Tapez dans le terminal :

npm i localforage

Redémarrons notre application. Dans le dossier src, nous allons créer un fichier forStorage.js, dans lequel se trouveront les fonctions pour travailler avec le stockage.

Ainsi, commençons par la fonction de chargement des produits depuis le stockage. Ajoutons dans forStorage.js l'importation de la bibliothèque et écrivons la fonction getProducts pour obtenir les produits :

import localforage from 'localforage';

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

Ci-dessous, après le code de la fonction, nous ajouterons également le code pour someNetwork, en simulant des délais réseau (jusqu'à 0,7 secondes) pour le bon fonctionnement des fonctions. Si notre produit est "mis en cache", alors dans les fonctions de travail avec le stockage, il n'y aura pas de délai, sinon, il y aura un délai, vous verrez plus tard comment cela fonctionne :

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);
	});
}

Prenez l'application que vous avez créée dans les travaux des leçons précédentes. Installez dans l'application le stockage localForage.

En utilisant les matériaux de la leçon, créez le fichier forStorage.js et écrivez-y la fonction getStudents pour récupérer les données des étudiants depuis le stockage.