Атрыманне дадзеных з сховішча ў 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 для атрымання дадзеных студэнтаў з сховішча.