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 учун код қўшамиз, тармоқдаги кечикishларни (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 функциясини сақланишдан ўқувчилар маълумотларини олиш учун ёзинг.