Ανάκτηση Δεδομένων από το Αποθηκευτικό Χώρο στο React Router

Βλέπετε ότι προς το παρόν η εφαρμογή μας είναι στατική. Σε αυτό και στα επόμενα μαθήματα, θα αρχίσουμε να της δίνουμε ζωή. Ήδη στα επόμενα μαθήματα, θα μπορούμε να προσθέτουμε προϊόντα στη λίστα χρησιμοποιώντας το React Router.

Σε αυτό το μάθημα, για αρχή, θα ασχοληθούμε με την ανάκτηση δεδομένων από το αποθηκευτικό χώρο. Για την τοπική αποθήκευση δεδομένων, θα χρησιμοποιήσουμε το αποθηκευτικό σύστημα localForage (μπορείτε να διαβάσετε για τη χρήση και τα πλεονεκτήματά του στην τεκμηρίωση) - έναν ανάλογο του LocalStorage, τον οποίο υποστηρίζουν όλα τα σύγχρονα πρόγραμμα περιήγησης. Στην πραγματικότητα, είναι μια ένωση πολλών τεχνολογιών αποθηκευτικού χώρου. Με σχετικά εύκολη χρήση, επιτρέπει την αποθήκευση μεγάλων όγκων δεδομένων, και διαφορετικών τύπων, συμπεριλαμβανομένων και εικόνων. Ας το εγκαταστήσουμε στο project μας. Πληκτρολογήστε στο τερματικό:

npm i localforage

Ας επανεκκινήσουμε την εφαρμογή μας. Στον φάκελο src, θα δημιουργήσουμε ένα αρχείο forStorage.js, στο οποίο θα υπάρχουν συναρτήσεις για εργασία με το αποθηκευτικό χώρο.

Λοιπόν, ας ξεκινήσουμε με τη λειτουργία φόρτωσης προϊόντων από το αποθηκευτικό χώρο. Ας προσθέσουμε στο forStorage.js την εισαγωγή της βιβλιοθήκης και ας γράψουμε τη συνάρτηση getProducts για την ανάκτηση προϊόντων:

import localforage from 'localforage';

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

Πιο κάτω, μετά τον κώδικα της συνάρτησης, θα προσθέσουμε επίσης κώδικα για την someNetwork, προσομοιώνοντας καθυστερήσεις δικτύου (έως 0.7 δευτερόλεπτα) για τη σωστή λειτουργία των συναρτήσεων. Αν το προϊόν μας είναι "προσωρινά αποθηκευμένο" (cached), τότε στις συναρτήσεις για εργασία με το αποθηκευτικό χώρο δεν θα υπάρχει καθυστέρηση, αλλιώς θα υπάρχει καθυστέρηση, θα δείτε στη συνέχεια πώς λειτουργεί αυτό:

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

Πάρτε την εφαρμογή που δημιουργήσατε στα αποθετήρια προηγούμενων μαθημάτων. Εγκαταστήστε στην εφαρμογή το αποθηκευτικό σύστημα localForage.

Χρησιμοποιώντας το υλικό του μαθήματος, δημιουργήστε ένα αρχείο forStorage.js και γράψτε σε αυτό τη συνάρτηση getStudents για την ανάκτηση δεδομένων μαθητών από το αποθηκευτικό χώρο.