Tilføjelse af data til lager i React Router

I denne lektion vil vi beskæftige os med tilføjelsen af en produkt til lageret. Til at starte med har vi brug for en funktion createProduct til at oprette et produkt, lad os tilføje den i forStorage.js efter funktionen getProducts:

export async function createProduct() {}

Først tilføjer vi igen someNetwork:

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

Men herefter har vi brug for et unikt id for hvert produkt, I har allerede stødt på dette i React-vejledningen. Lad os bruge biblioteket nanoid til dette. Indtast følgende kommando i terminalen:

npm install --save nanoid

Importer biblioteket i forStorage.js:

import { nanoid } from 'nanoid'

Lad os have id på 6 tegn:

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

Oprindeligt, når vi opretter et produkt, vil vi kun have id i objektet. Lad os kalde getProducts, tilføje det genererede produkt og opdatere listen over vores produkter i lageret. Færdig:

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

Funktionen til at opdatere listen i lageret vil være følgende (vi vil indsætte produkterne under nøglen products), lad os placere den efter funktionen createProduct:

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

Tag applikationen, som I oprettede i opgaverne til de foregående lektioner. Brug materialet fra lektionen til at skrive funktionen createStudent og setStudents i forStorage.js for at tilføje studerendes data til lageret.