React Router'da ma'lumotlarni saqlash joyidan olish

Siz ko'rib turganingizdek, hozircha bizning ilovamiz statik. Ushbu va keyingi darslarda biz uni jonlantirishni boshlaymiz. Yaqin darslarda biz React Router yordamida mahsulotlarni ro'yxatga qo'shisha olamiz.

Ushbu darsda biz, boshlash uchun, ma'lumotlarni saqlash joyidan olish bilan tanishamiz. Ma'lumotlarni mahalliy saqlash uchun biz localForage saqlash joyidan foydalanamiz (siz uning qo'llanilishi va afzalliklari haqida hujjatlarda o'qishingiz mumkin) - LocalStoragening analogi, uni hamma zamonaviy brauzerlar qo'llaydi. Aslida bu bir nechta saqlash texnologiyalarining birlashmasidir. Nisbatan oson foydalanish bilan, u katta hajmdagi ma'lumotlarni, shu jumladan turli turlardagi va hatto rasmlarni saqlash imkonini beradi. Keling, uni loyihamizga o'rnatamiz. Terminalga kiriting:

npm i localforage

Ilovamizni qayta ishga tushiramiz. src papkasida biz saqlash joyi bilan ishlash uchun funksiyalar bo'ladigan forStorage.js faylini yaratamiz.

Shunday qilib, saqlash joyidan mahsulotlarni yuklash funksiyasi bilan boshlaymiz. forStorage.js ga kutubxonani import qo'shamiz va mahsulotlarni olish uchun getProducts funksiyasini yozamiz:

import localforage from 'localforage';

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

Funksiya kodidan keyin quyida biz shuningdek someNetwork uchun kod qo'shamiz, tarmoq kechikishlarini (0.7 soniyagacha) imitasiya qilish uchun funksiyalarning normal ishlashi uchun. Agar bizning mahsulotimiz "keshlangan" bo'lsa, saqlash joyi bilan ishlash funksiyalarida kechikish bo'lmaydi, aks holda, kechikish bo'ladi, keyinroq buning qanday ishlashini ko'rasiz:

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

Oldingi darslar topshiriqlarida yaratgan ilovangizni oling. Ilovangizga localForage saqlash joyini o'rnating.

Dars materiallaridan foydalanib, forStorage.js faylini yarating va unda saqlash joyidan talabalar ma'lumotlarini olish uchun getStudents funksiyasini yozing.