Տվյալների ստացումը պահեստից 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 ֆունկցիան՝ ուսանողների տվյալները պահեստից ստանալու համար։