Преузимање података из складишта у 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 за добијање података студената из складишта.