Дар 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-ро барои илова кардани маълумоти донишҷӯён ба анбор нависед.