Kupata Data Kutoka Kuhifadhi Katika React Router

Unaona kuwa kwa sasa programu yetu ni tuli. Katika somo hili na matukio yajayo tutaanza kuifanya iwe hai. Tayari katika masomo yajayo tutaweza kuongeza bidhaa kwenye orodha kwa kutumia React Router.

Katika somo hili, kuanza, tutaelewa kupata data kutoka kuhifadhi. Kwa ajili ya kuhifadhi data za ndani tutatumia kuhifadhi localForage (unaweza kusoma kuhusu matumizi yake na faida katika nyaraka) - mfano wa LocalStorage, ambayo inasaidiwa na kivinjari kisasa. Kwa kweli hii ni muungano wa teknolojia kadhaa za kuhifadhi. Kwa matumizi rahisi, inaruhusu kuhifadhi kiasi kikubwa cha data, za aina tofauti, pamoja na picha. Wacha tuisanze katika mradi wetu. Andika kwenye terminali:

npm i localforage

Wacha tuianzishe upya programu yetu. Katika folda src tutaunda faili forStorage.js, ambayo itakuwa na kazi za kufanya kazi na kuhifadhi.

Kwa hivyo, wacha tuanze na kazi ya kupakia bidhaa kutoka kuhifadhi. Ongeza katika forStorage.js kuingiza maktaba na kuandika kazi getProducts ya kupata bidhaa:

import localforage from 'localforage';

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

Chini baada ya msimbo wa kazi pia tutaongeza msimbo wa someNetwork, kuiga ucheleweshaji wa mtandao (hadi sekunde 0.7) kwa ajili ya kazi ya kawaida ya kazi. Ikiwa bidhaa yetu imehifadhiwa kwenye kache, basi katika kazi za kufanya kazi na kuhifadhi hakutakuwa na ucheleweshaji, ikiwa sivyo, kutakuwa na ucheleweshaji, utaona baadaye, jinsi hii inavyofanya kazi:

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

Chukua programu uliyoiumba katika kazi za masomo yaliyopita. Sakinisha katika programu kuhifadhi localForage.

Kwa kutumia nyenzo za somo, unda faili forStorage.js na uandike ndani yake kazi getStudents ya kupata data ya wanafunzi kutoka kuhifadhi.