Marrja e të dhënave nga depo në React Router

Ju shihni që aplikacioni ynë është statik për momentin. Në këtë dhe në mësimet në vijim do të fillojmë ta bëjmë atë të gjallë. Tashmë në mësimet e ardhshme do të jemi në gjendje të shtojmë produkte në listë me ndihmën e React Router.

Në këtë mësim, për të filluar, do të merremi me marrjen e të dhënave nga depo. Për ruajtjen lokale të të dhënave do të përdorim depon localForage (ju mund të lexoni rreth përdorimit dhe përparësive të saj në dokumentacion) - një analog i LocalStorage, që mbështetet nga të gjithë shfletuesit modernë. Në fakt ky është një bashkim i disa teknologjive të depove. Me një përdorim relativisht të lehtë, ai lejon ruajtjen e vëllimeve të mëdha të të dhënave, dhe ato të llojeve të ndryshme, përfshirë edhe imazhe. Le ta instalojmë atë në projektin tonë. Shkruani në terminal:

npm i localforage

Le të rinisim aplikacionin tonë. Në dosjen src ne do të krijojmë skedarin forStorage.js, ku do të jenë funksionet për të punuar me depon.

Pra, le të fillojmë me funksionin e ngarkimit të produkteve nga depo. Le të shtojmë në forStorage.js importin e bibliotekës dhe të shkruajmë funksionin getProducts për marrjen e produkteve:

import localforage from 'localforage';

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

Më poshtë pas kodit të funksionit ne gjithashtu do të shtojmë kod për someNetwork, duke imituar vonesa në rrjet (deri në 0.7 sekonda) për funksionimin normal të funksioneve. Nëse produkti ynë është "i fshehur", atëherë në funksionet për të punuar me depon nuk do të ketë vonesë, nëse jo, atëherë do të ketë vonesë, ju do ta shihni në vijim, si funksionon kjo:

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

Merrni aplikacionin, të krijuar nga ju në detyrat e mësimeve të kaluara. Instaloni në aplikacion depon localForage.

Duke përdorur materialet e mësimit, krijoni skedarin forStorage.js dhe shkruani në të funksionin getStudents për marrjen e të dhënave të studentëve nga depo.