Ajouter des données dans le stockage avec React Router

Dans cette leçon, nous allons nous occuper de l'ajout d'un produit dans le stockage. Pour commencer, nous avons besoin d'une fonction createProduct pour créer un produit, ajoutons-la dans forStorage.js après la fonction getProducts :

export async function createProduct() {}

D'abord, nous ajoutons à nouveau someNetwork :

export async function createProduct() {
	await someNetwork();
}

Ensuite, nous aurons besoin d'un id unique pour chaque produit, vous avez déjà rencontré cela dans le tutoriel React. Utilisons pour cela la bibliothèque nanoid. Entrons la commande suivante dans le terminal :

npm install --save nanoid

Importons la bibliothèque dans forStorage.js :

import { nanoid } from 'nanoid'

Disons que nous aurons des id de 6 caractères :

export async function createProduct() {
	await someNetwork();
	let id = nanoid(6);
}

Initialement, lors de la création du produit, nous aurons seulement id dans l'objet. Appelons getProducts, ajoutons le produit généré et mettons à jour la liste de nos produits dans le stockage. Terminé :

export async function createProduct() {
	await someNetwork();
	let id = nanoid(6);
	let product = { id };
	let products = await getProducts();
	products.unshift(product);
	await setProducts(products);
	return product;
}

La fonction pour mettre à jour la liste dans le stockage sera la suivante (nous y mettrons les produits sous la clé products), plaçons-la après la fonction createProduct :

function setProducts(products) {
	return localforage.setItem('products', products);
}

Prenez l'application que vous avez créée dans les exercices des leçons précédentes. En utilisant le contenu de la leçon, écrivez dans forStorage.js la fonction createStudent et setStudents pour ajouter les données des étudiants dans le stockage.