Mengambil Data dari Penyimpanan di React Router

Anda melihat bahwa aplikasi kita masih statis. Dalam pelajaran ini dan selanjutnya, kita akan mulai menghidupkannya. Sudah pada pelajaran mendatang kita akan bisa menambahkan produk ke daftar menggunakan React Router.

Dalam pelajaran ini, untuk memulai, kita akan membahas pengambilan data dari penyimpanan. Untuk penyimpanan data lokal kita akan menggunakan penyimpanan localForage (Anda dapat membaca tentang penggunaannya dan keunggulannya di dokumentasi) - analog dari LocalStorage, yang didukung oleh semua browser modern. Secara faktual, ini adalah penggabungan dari beberapa teknologi penyimpanan. Dengan penggunaan yang relatif mudah, ia memungkinkan penyimpanan data dalam volume besar, dan juga berbagai tipe, termasuk gambar. Mari kita instal ke proyek kita. Ketik di terminal:

npm i localforage

Mari restart aplikasi kita. Di folder src kita akan buat file forStorage.js, yang akan berisi fungsi-fungsi untuk bekerja dengan penyimpanan.

Jadi, mari mulai dengan fungsi memuat produk dari penyimpanan. Tambahkan di forStorage.js impor 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 kode fungsi kita juga akan menambahkan kode untuk someNetwork, meniru penundaan jaringan (hingga 0,7 detik) untuk kerja fungsi yang normal. Jika produk kita "di-cache", maka dalam fungsi untuk bekerja dengan penyimpanan tidak akan ada penundaan, jika tidak, maka akan ada penundaan, Anda akan lihat nanti, bagaimana ini bekerja:

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 dibuat Anda dalam tugas-tugas untuk pelajaran sebelumnya. Instal penyimpanan localForage di aplikasi.

Menggunakan materi pelajaran, buatlah file forStorage.js dan tulis di dalamnya fungsi getStudents untuk mendapatkan data siswa dari penyimpanan.