Деректені 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;
}

Төменде функция кодынан кейін біз желінің кідірістерін (0.7 секундқа дейін) имитациялау үшін someNetwork үшін кодты да қосамыз, функциялардың қалыпты жұмыс істеуі үшін. Егер біздің өніміміз "кэштелген" болса, онда дерекқормен жұмыс істеу функцияларында кідіріс болмайды, ал болмаса, онда кідіріс болады, бұл әрекетті кейінірек көресіз:

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