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