Andmete lisamine hoidlasse React Routeris

Selles õppetükis tegeleme toote lisamisega hoidlasse. Alustuseks vajame funktsiooni createProduct toote loomiseks, lisame selle faili forStorage.js peale funktsiooni getProducts:

export async function createProduct() {}

Kõigepealt lisame uuesti someNetwork:

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

Seejärel vajame unikaalset id-d iga toote jaoks, olete sellega kokku puutunud Reacti õpikus. Kasutame selleks teeki nanoid. Sisestame terminali järgmise käsu:

npm install --save nanoid

Impordime faili forStorage.js teegi:

import { nanoid } from 'nanoid'

Olgu meil id-d 6 sümboli pikkused:

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

Algselt on toote loomisel meil objektis ainult id. Kutsume välja getProducts, lisame loodud toode ja uuendame oma toodete nimekirja hoidlas. Valmis:

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

Funktsioon nimekirja uuendamiseks hoidlas on järgmine (lisame sellele tooded võtme products all), paigutame selle funktsiooni createProduct järele:

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

Võtke rakendus, mille lõite varasemate õppetundide ülesannetes. Kasutades tunni materjale, kirjutage faili forStorage.js funktsioon createStudent ja setStudents õpilaste andmete lisamiseks hoidlasse.