React Router-da maglumatlary ammaryňyzdan alyň

Siziň aplikasiýaňyz häzirki wagtda statikdyr. Bu we indiki sapaklarda biz oňa jan goşarys. Indiki sapaklarda biz React Router arkaly önümleri sanawa goşup biläris.

Bu sapakda, başlangyç üçin, ammardan maglumat aýlyş bilen meşgullanarys. Ýerli maglumat saklamak üçin biz localForage ammaryny ulanarys (siz onuň ulanylyşy we artmaýan üstünlikleri barada gollanmadan okaýyň) - häzirki zaman brauzerleriň ählisi goldaýan LocalStorage-yň ekwiwalenti. Aslynda bu birnäçe ammar tehnologiýalarynyň birleşmesi. Nisbeten ýeňil ulanylanda, ol uly köpçülikleýin maglumatlary, şol sanda suratlary hem saklap biler. Geliň ony taslamamyza guruň. Terminale giriň:

npm i localforage

Aplikasiýamyzy gaýtadan işledeliň. src bukjasyna biz forStorage.js failyny dörederis, ol ýerde ammar bilen iş üçin funksiýalar bolup biler.

Şeýlelik bilen, ammardan önümleri ýüklemek funksiýasy bilen başlarys. forStorage.js bukjasyna kitaphanany import ederis we getProducts funksiýasyny önümleri almak üçin ýazaris:

import localforage from 'localforage';

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

Aşakda funksiýanyň kodundan soň biz şeýle-de someNetwork üçin kody goşarys, tor gijä galmalaryny (0.7 sekunt çenli) ýönekeý iş üçin göz öňünde tutýan. Eger önümiňiz "kesheleşdirilen" bolsa, ammar bilen işlemek funksiýalarynda gijä galma bolmaz, ýok bolsa, gijä galma bolup biler, indiki wagtlarda onuň nähili işleýändigini görersiňiz:

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

Öňki sapaklardaky wezipeleriňizde döreden aplikasiýaňyzy alyň. Aplikasiýada localForage ammaryny guruň.

Sapak materiallaryny ulanyp, forStorage.js failyny dörediň we onda ammardan okuwçylaryň maglumatlaryny alyş üçin getStudents funksiýasyny ýazyň.