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 функциясын жазыңыз.