Andmete hankimise hoidlast React Routeris

Te näete, et siiamaani on meie rakendus staatiline. Selles ja järgnevas õppetükis hakkame seda elustama. Juba lähitulevates õppetükides saame lisada tooteid nimekirja abil React Router.

Selles õppetükis hakkame esmalt tegelema andmete hankimisega hoidlast. Kohalikuks andmete salvestamiseks kasutame hoidlat localForage (saate lugeda selle kasutamise ja eeliste kohta dokumentatsioonist) - LocalStorage analoog, mida toetavad kõik kaasaegsed veebilehitsejad. Tegelikult on see mitme hoidlatehnoloogia ühendus. Suhteliselt kerge kasutamise korral võimaldab see salvestada suuri andmemahtusid, ja erinevat tüüpi, sealhulgas pilte. Paigaldame selle oma projekti. Sisestage terminali:

npm i localforage

Käivitame oma rakenduse uuesti. Kaustas src loome faili forStorage.js, mis sisaldab funktsioone hoidlaga töötamiseks.

Niisiis, alustame funktsiooniga toodete laadimiseks hoidlast. Lisame failile forStorage.js teegi impordi ja kirjutame funktsiooni getProducts toodete saamiseks:

import localforage from 'localforage';

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

Allpool funktsiooni koodi lisame ka koodi someNetwork jaoks, imiteerides võrgu viivitusi (kuni 0.7 sekundit) funktsioonide normaalseks tööks. Kui meie toode on "vahemällu salvestatud", siis hoidlaga töötamise funktsioonides ei ole viivituset, kui mitte, siis on viivitus, näete edaspidi, kuidas see töötab:

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

Võtke rakendus, mille lõite eelmiste õppetundide ülesannetes. Paigaldage rakendusse hoidla localForage.

Kasutades õppetunni materjale, looge fail forStorage.js ja kirjutage sellesse funktsioon getStudents õpilaste andmete saamiseks hoidlast.