Pobieranie danych z magazynu w React Router

Widzisz, że na razie nasza aplikacja jest statyczna. W tej i kolejnych lekcjach zaczniemy ją ożywiać. Już w najbliższych lekcjach będziemy mogli dodawać produkty do listy za pomocą React Router.

W tej lekcji, na początek, zajmiemy się pobieraniem danych z magazynu. Do lokalnego przechowywania danych będziemy używać magazynu localForage (możesz przeczytać o jego użyciu i zaletach w dokumentacji) - odpowiednik LocalStorage, który obsługują wszystkie nowoczesne przeglądarki. Faktycznie jest to połączenie kilku technologii magazynów. Przy stosunkowo łatwym użyciu, pozwala przechowywać duże ilości danych, i to różnych typów, w tym także obrazy. Zainstalujmy go w naszym projekcie. Wpisz w terminalu:

npm i localforage

Uruchommy ponownie naszą aplikację. W folderze src utworzymy plik forStorage.js, w którym będą funkcje do pracy z magazynem.

A więc, zaczniemy od funkcji ładowania produktów z magazynu. Dodajmy w forStorage.js import biblioteki i napiszmy funkcję getProducts do pobierania produktów:

import localforage from 'localforage';

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

Poniżej po kodzie funkcji dodamy również kod dla someNetwork, symulując opóźnienia sieci (do 0.7 sekundy) dla normalnej pracy funkcji. Jeśli nasz produkt jest "zbuforowany", to w funkcjach do pracy z magazynem nie będzie opóźnienia, jeśli nie, to będzie opóźnienie, zobaczysz dalej, jak to działa:

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

Weź aplikację, stworzoną przez ciebie w zadaniach do poprzednich lekcji. Zainstaluj w aplikacji magazyn localForage.

Korzystając z materiałów lekcji, utwórz plik forStorage.js i napisz w nim funkcję getStudents do pobierania danych studentów z magazynu.