Duomenų gavimas iš saugyklos React Router

Matote, kad kol kas mūsų programa yra statinė. Šioje ir kituose pamokose mes pradėsime ją priversti gyvuoti. Jau artimiausiose pamokose galėsime pridėti produktus į sąrašą naudodami React Router.

Šioje pamokoje mes, pradžiai, išsiaiškinsime su duomenų gavimu iš saugyklos. Vietinei duomenų saugojimui mes naudosime saugyklą localForage (apie jos naudojimą ir pranašumus galite paskaityti dokumentacijoje) - LocalStorage atitikmuo, kurį palaiko visi modernūs naršyklės. Iš tikrųjų tai yra kelių saugyklų technologijų susijungimas. Esant gana lengvam naudojimui, ji leidžia saugoti didelius duomenų kiekius, ir skirtingų tipų, taip pat ir paveikslėlius. Įdiegkime ją į mūsų projektą. Įveskite terminale:

npm i localforage

Paleiskime mūsų programą iš naujo. Kataloge src mes sukursime failą forStorage.js, kuriame bus funkcijos darbui su saugykla.

Taigi, pradėkime nuo funkcijos produktų įkėlimo iš saugyklos. Pridėkime į forStorage.js bibliotekos importą ir parašykime funkciją getProducts produktų gavimui:

import localforage from 'localforage';

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

Žemiau po funkcijos kodo taip pat pridėkime kodą someNetwork, imituodami tinklo delsimus (iki 0.7 sekundės) for normalaus funkcijų veikimo. Jei mūsų produktas "pašreiptas", then funkcijose for work with saugykla delsimo nebus, jei ne, tada bus delsima, you see in the future, kaip tai veikia:

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

Paimkite programą, kurią sukūrėte užduotyse ankstesnėse pamokose. Įdiekite programoje saugyklą localForage.

Naudodamiesi pamokos medžiaga, sukurkite failą forStorage.js ir parašykite jame funkciją getStudents for getting studentų duomenų iš saugyklos.