Tietojen hakeminen tallennustilasta React Routerissa

Näet, että toistaiseksi sovelluksemme on staattinen. Tällä ja seuraavilla oppitunneilla alamme elävöittää sitä. Jo lähipäivinä pystymme lisäämään tuotteita luetteloon käyttämällä React Routeria.

Tällä oppitunnilla aloitamme selvittämällä tietojen hakemisen tallennustilasta. Paikalliseen tietojen tallentamiseen käytämme localForage-tallennustilaa (voit lukea sen käytöstä ja eduista dokumentaatiosta) - LocalStoragein vastine, jota kaikki modernit selaimet tukevat. Käytännössä se on useiden erilaisten tallennusteknologioiden yhdistelmä. Suhteellisen kevyen käytön ansiosta se mahdollistaa suurten tietomäärien tallentamisen, ja eri tyyppisiä tietoja, mukaan lukien kuvia. Asennetaan se projektiimme. Kirjoita terminaaliin:

npm i localforage

Käynnistetään sovelluksemme uudelleen. Luodaan kansioon src tiedosto forStorage.js, jossa on funktiot tallennustilan käsittelyyn.

Aloitetaan siis funktiolla tuotteiden lataamiseksi tallennustilasta. Lisätään forStorage.js tiedostoon kirjaston import ja kirjoitetaan funktio getProducts tuotteiden hakemiseksi:

import localforage from 'localforage';

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

Alla funktiokoodin jälkeen lisäämme myös koodin someNetwork funktiolle, matkien verkon viiveitä (jopa 0.7 sekuntia) normaalia funktioiden toimintaa varten. Jos tuotteemme on "välimuistissa", tallennustilan käsittelyfunktioissa ei ole viivettä, jos ei, niin viive tulee, näet myöhemmin, kuinka tämä toimii:

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

Ota edellisten oppituntien tehtävissä luomasi sovellus. Asenna sovellukseen localForage-tallennustila.

Hyödyntäen oppitunnin materiaaleja, luo tiedosto forStorage.js ja kirjoita siihen funktio getStudents opiskelijoiden tietojen hakemiseksi tallennustilasta.