Sivun tietojen lataaminen URL-parametreista tallennustilasta React Routerissa

Nyt voimme lisätä tuotteita sovellukseemme. Käynnistä sovellus ja lisää painikkeella pari tuotetta. Jos nyt klikkaamme listassa itse tuotteita, niin näemme, että jokaisella tuotteella on vielä sama staattinen sivu, jota käsittelemme tässä ja seuraavissa oppitunneissa.

On myös tarpeen huomata toinen seikka. Yleensä koko URL on jaettu segmentteihin - nämä ovat URL:n osia /-merkkien välissä. Sinut varmaankin muistat, että tätä sovellusta luodessa määritimme polun 'products/:productId', joten :productId on tässä nimeltään dynaaminen segmentti. Sen edessä on ':'-merkki. Tämän segmentin arvot muuttuvat, ja nimenomaan ne päätyvät URL-parametreihin (URL Params tai params), jotka välitetään lataajalle tietyn avaimen alla, meidän tapauksessamme se on params.productId.

Katsokaa selaimen osoiteriviä, kun klikkaatte tuotteita listassa. Näette, että osoiterivin viimeinen segmentti muuttuu, ja nämä arvot päätyvät lataajaan. Ja tuotteillamme tallennustilassa on uniikki meidän luomamme id, näin ollen ladataan se tuote, jota tarvitsemme.

Ja nyt pienen poikkeaman jälkeen työskentelemme vihdoin tuotesivun kanssa, tarkemmin sanottuna - tietojen lataamisen kanssa tallennustilasta.

Toistetaan tuttu prosessi. Aluksi forStorage.js-tiedostoon lisätään funktio getProduct tietyn tuotteen tietojen hakemiseksi tallennustilasta id:n perusteella. Tässä siirrämme funktioon id:n ja vastaavasti, jos tuote on "välimuistissa", niin se tulostuu viiveettä:

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
}

Seuraavaksi meidän on saatava tuotelista ja löydettävä siitä tuote annetun id:n perusteella:

export async function getProduct(id) {
	await someNetwork(`product:${id}`);
	let products = await localforage.getItem('products');
	let product = products.find((product) => product.id === id);
	return product ?? null;
}

Ota edellisten oppituntien tehtävissä luomasi sovellus. Hyödynnä oppitunnin materiaaleja ja luo forStorage.js-tiedostoon funktio getStudent opiskelijan tietojen hakemiseksi id:n perusteella.