React Routerда хранилищега маълумот қўшиш

Ушбу дарсда биз хранилищега продукт қўшиш билан шуғулланамиз. Бошлаш учун бизга продукт яратиш учун createProduct функцияси керак, уни forStorage.js файлидаги getProducts функциясидан кейин қўшамиз:

export async function createProduct() {}

Аввал someNetwork ни қўшамиз:

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

Кейин бизга ҳар бир продукт учун уникал id керак бўлади, буни сиз React ўқув қўлланмасида учратгандингиз. Бунинг учун nanoid кутубхонасидан фойдаланамиз. Терминалда куйидаги буйруқни киритамиз:

npm install --save nanoid

forStorage.js файлига кутубхонани импорт қиламиз:

import { nanoid } from 'nanoid'

Бизда idлар 6 та белгидан иборат бўлсин:

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

Продукт яратилганда дарров унинг объектида фақат id бўлади. getProducts ни чақирамиз, яратилган продуктни қўшамиз ва хранилищедаги продуктлар рўйхатини янгилаймиз. Тайёр:

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

Хранилищедаги рўйхатни янгилаш функцияси куйидагича бўлади (биз унинг ичига продуктларни products калити остига қўшамиз), уни createProduct функциясидан кейин жойлаштирамиз:

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

Олдинги дарслардаги вазифаларда яратган иловангизни олинг. Дарс материалларидан фойдаланиб, forStorage.js файлида хранилищега талабалар маълумотларини қўшиш учун createStudent ва setStudents функцияларини ёзинг.