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ň.