Извличане на данни от хранилище в 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 за получаване на данни за студенти от хранилището.