Legge til data i lagring i React Router

I denne leksjonen skal vi jobbe med å legge til et produkt i lagring. Til å begynne med trenger vi en funksjon createProduct for å opprette et produkt, la oss legge den til i forStorage.js etter funksjonen getProducts:

export async function createProduct() {}

Først legger vi til someNetwork igjen:

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

Men heretter trenger vi en unik id for hvert produkt, du har allerede møtt dette i React-opplæringen. La oss bruke biblioteket nanoid for dette. Skriv inn følgende kommando i terminalen:

npm install --save nanoid

Importer biblioteket i forStorage.js:

import { nanoid } from 'nanoid'

La oss ha id på 6 tegn:

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

Opprinnelig, når vi oppretter produktet, vil vi kun ha id i objektet. La oss kalle getProducts, legge til det genererte produktet og oppdatere listen over våre produkter i lagring. Ferdig:

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

Funksjonen for å oppdatere listen i lagring vil være som følger (vi vil legge produktene inn under nøkkelen products), la oss plassere den etter funksjonen createProduct:

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

Ta applikasjonen du opprettet i oppgavene til de foregående leksjonene. Bruk materialet fra leksjonen, skriv i forStorage.js funksjonen createStudent og setStudents for å legge til studentdata i lagring.