Datu iegūšana no krātuves React Router

Jūs redzat, ka pagaidām mūsu lietotne ir statiska. Šajā un nākamajās nodarbībās mēs sāksim to padarīt dinamiskāku. Jau tuvākajās nodarbībās mēs varēsim pievienot produktus sarakstam, izmantojot React Router.

Šajā nodarbībā mēs, iesākumam, izpratīsimies ar datu iegūšanu no krātuves. Lokālai datu glabāšanai mēs izmantosim krātuvi localForage (jūs varat izlasīt par tās izmantošanu un priekšrocībām dokumentācijā) - analogs LocalStorage, ko atbalsta visi mūsdienu pārlūkprogrammas. Faktiski tas ir vairāku krātuves tehnoloģiju apvienojums. Ar salīdzinoši vieglu izmantošanu, tas ļauj glabāt lielus datu apjomus, un dažāda veida, tostarp arī attēlus. Instalēsim to mūsu projektā. Ierakstiet terminālī:

npm i localforage

Pārstartēsim mūsu lietotni. Mapē src mēs izveidosim failu forStorage.js, kurā būs funkcijas darbam ar krātuvi.

Tātad, sāksim ar funkciju produktu ielādei no krātuves. Pievienosim forStorage.js bibliotēkas importu un uzrakstīsim funkciju getProducts produktu iegūšanai:

import localforage from 'localforage';

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

Zemāk aiz funkcijas koda mēs arī pievienosim kodu funkcijai someNetwork, imitējot tīkla aizkaves (līdz 0.7 sekundēm) priekš normālas funkciju darbības. Ja mūsu produkts ir "kešots", tad funkcijās darbam ar krātuvi aizkaves nebūs, ja nav, tad būs aizkave, jūs redzēsiet turpmāk, kā tas strādā:

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);
	});
}

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Instalējiet lietotnē krātuvi localForage.

Izmantojot nodarbības materiālus, izveidojiet failu forStorage.js un ierakstiet tajā funkciju getStudents studentu datu iegūšanai no krātuves.