Gegevens toevoegen aan opslag in React Router

In deze les gaan we een product toevoegen aan de opslag. Om te beginnen hebben we een functie createProduct nodig voor het aanmaken van een product, laten we deze toevoegen in forStorage.js na de functie getProducts:

export async function createProduct() {}

Eerst voegen we opnieuw someNetwork toe:

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

Vervolgens hebben we een unieke id voor elk product nodig, je bent dit al tegengekomen in de React tutorial. Laten we hiervoor de bibliotheek nanoid gebruiken. Voer de volgende opdracht in de terminal in:

npm install --save nanoid

Importeren we de bibliotheek in forStorage.js:

import { nanoid } from 'nanoid'

Laten we id hebben van 6 karakters:

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

Aanvankelijk hebben we bij het aanmaken van een product alleen id in het object. Laten we getProducts aanroepen, het gegenereerde product toevoegen en de lijst met onze producten in de opslag bijwerken. Klaar:

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

De functie voor het bijwerken van de lijst in de opslag zal de volgende zijn (we zullen de producten erin plaatsen onder de sleutel products), laten we deze plaatsen na de functie createProduct:

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

Neem de applicatie die je hebt gemaakt in opdrachten bij eerdere lessen. Gebruikmakend van de lesmaterialen, schrijf in forStorage.js de functie createStudent en setStudents voor het toevoegen van studentgegevens aan de opslag.