Data uit die stoorplek verkry in React Router

Jy sien dat ons toepassing tans staties is. In hierdie en daaropvolgende lesse begin ons dit lewendig maak. Reeds in die volgende paar lesse sal ons produkte by die lys kan voeg met behulp van React Router.

In hierdie les gaan ons, om mee te begin, die verkryging van data uit die stoorplek hanteer. Vir plaaslike data berging gaan ons die stoorplek localForage gebruik (jy kan lees oor die gebruik en voordele daarvan in die dokumentasie) - 'n ekwivalent van LocalStorage, wat deur alle moderne blaaier ondersteun word. In wese is dit 'n kombinasie van verskeie stoortegnologieë. Met relatief maklike gebruik, laat dit toe om groot hoeveelhede data te stoor, en van verskillende tipes, insluitend prente. Kom ons installeer dit in ons projek. Tik in die terminaal:

npm i localforage

Laat ons ons toepassing herbegin. In die lêergids src sal ons 'n lêer forStorage.js skep, waarin funksies vir werk met die stoorplek sal wees.

So, laat ons begin met die funksie om produkte te laai uit die stoorplek. Laat ons byvoeg in forStorage.js die invoer van die biblioteek en skryf die funksie getProducts om produkte te verkry:

import localforage from 'localforage';

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

Onder die kode van die funksie sal ons ook byvoeg kode vir someNetwork, om vertragings in die netwerk te simuleer (tot 0.7 sekondes) vir normale werking van die funksies. As ons produk "gekesjeer" is, sal daar geen vertraging in die funksies vir werk met die stoorplek wees nie, indien nie, dan sal daar 'n vertraging wees, jy sal later sien, hoe dit werk:

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

Neem die toepassing wat jy geskep het in opdragte van vorige lesse. Installeer in die toepassing die stoorplek localForage.

Gebruik die materiaal van die les, skep 'n lêer forStorage.js en skryf daarin die funksie getStudents om studentedata uit die stoorplek te verkry.