Додаҳо аз анбор гирифтан дар React Router

Шумо мебинед, ки то ҳол барномаи мо статикӣ аст. Дар ин ва дарсҳои оянда мо ба зинда кардани он шурӯъ мекунем. Аллакай дар дарсҳои наздик мо метавонем маҳсулот ба рӯйхат илова кунед бо ёрии React Router.

Дар ин дарс мо, барои оғоз, бо гирифтани додаҳо аз анбор шинос мешавем. Барои нигоҳдории маҳаллии додаҳо мо истифода мебарем анбори localForage (шумо метавонед дар бораи истифода ва бартариҳои он дар ҳуҷҷатҳо хонед) - аналоги LocalStorage, ки ҳамаи браузерҳои муосир дастгирӣ мекунанд. Дар асл ин якҷояшавии чанд технологияи анборҳост. Дар муқоиса бо истифодаи нисбатан осон, он имкон медиҳад, ки ҳаҷми калони додаҳо нигоҳ дошта шавад, ва онҳо аз навъҳои гуногун, аз ҷумла расмҳо низ. Биёед онро дар лоиҳаи насб кунем. Дар терминал ворид кунед:

npm i localforage

Барномаи худро аз нав оғоз кунем. Дар пӯша src мо файли forStorage.js эҷод мекунем, ки дар он функсияҳо барои кор бо анбор хоҳанд буд.

Пас, бо функсияи боркунии маҳсулот аз анбор оғоз кунем. Ба forStorage.js ворид кардани китобхона илова кунед ва функсияи getProducts барои гирифтани маҳсулот нависед:

import localforage from 'localforage';

export async function getProducts() {
	await someNetwork();
	let products = await localforage.getItem('products');
	if (!products) products = [];
	return products;
}

Дар поёни рамзи функсия мо низ илова мекунем рамз барои someNetwork, тақлид кардани таъхирҳои шабака (то 0.7 сония) барои коркарди дурусти функсияҳо. Агар маҳсулоти мо "кешшуда" бошад, пас дар функсияҳои кор бо анбор таъхире нахоҳад буд, агар на, таъхир хоҳад буд, шумо дар оянда хоҳед дид, ки ин чӣ гуна кор мекунад:

let someCache = {};

async function someNetwork(key) {
	if (!key) {
		someCache = {};
	}

	if (someCache[key]) {
		return;
	}

	someCache[key] = true;

	return new Promise((res) => {
		setTimeout(res, Math.random() * 700);
	});
}

Барномаеро, ки шумо дар вазифаҳои дарсҳои гузашта сохтаед, гиред. Насб кунед дар барнома анбори localForage.

Бо истифода аз маводи дарс, эҷод кунед файли forStorage.js ва дар он нависед функсияи getStudents барои гирифтани додаҳои донишҷӯён аз анбор.