Mendapatkan Data dari Stor dalam React Router

Anda lihat bahawa buat masa ini aplikasi kami adalah statik. Dalam pelajaran ini dan seterusnya, kita akan mula menghidupkannya. Dalam pelajaran terdekat, kita akan dapat menambah produk ke dalam senarai menggunakan React Router.

Dalam pelajaran ini, kita, untuk permulaan, akan memahami pengambilan data dari stor. Untuk penyimpanan data tempatan kita akan menggunakan stor localForage (anda boleh membaca mengenai penggunaannya dan kelebihannya dalam dokumentasi) - alternatif kepada LocalStorage, yang disokong oleh semua pelayar moden. Secara praktikalnya ini adalah gabungan beberapa teknologi stor. Dengan penggunaan yang agak mudah, ia membolehkan penyimpanan data yang besar, dan pelbagai jenis, termasuk gambar. Mari kita pasangkannya dalam projek kita. Taip dalam terminal:

npm i localforage

Mula semula aplikasi kita. Dalam folder src kita akan buat fail forStorage.js, di mana fungsi untuk bekerja dengan stor akan berada.

Jadi, mari mulakan dengan fungsi memuatkan produk dari stor. Tambahkan dalam forStorage.js import pustaka dan tulis fungsi getProducts untuk mendapatkan produk:

import localforage from 'localforage';

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

Di bawah selepas kod fungsi kita juga akan tambahkan kod untuk someNetwork, mensimulasikan kelewatan rangkaian (sehingga 0.7 saat) untuk fungsi berfungsi dengan normal. Jika produk kami "dicache", maka dalam fungsi untuk bekerja dengan stor tidak akan ada kelewatan, jika tidak, akan ada kelewatan, anda akan lihat nanti, bagaimana ia berfungsi:

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

Ambil aplikasi, yang dicipta oleh anda dalam tugasan untuk pelajaran lepas. Pasangkan dalam aplikasi stor localForage.

Menggunakan bahan pelajaran, cipta fail forStorage.js dan tulis di dalamnya fungsi getStudents untuk mendapatkan data pelajar dari stor.