Lấy Dữ Liệu Từ Kho Lưu Trữ Trong React Router

Bạn có thể thấy rằng ứng dụng của chúng ta hiện tại đang tĩnh. Trong bài học này và các bài học tiếp theo, chúng ta sẽ bắt đầu làm cho nó sống động. Ngay trong các bài học sắp tới, chúng ta sẽ có thể thêm sản phẩm vào danh sách bằng cách sử dụng React Router.

Trong bài học này, để bắt đầu, chúng ta sẽ tìm hiểu về việc lấy dữ liệu từ kho lưu trữ. Để lưu trữ dữ liệu cục bộ, chúng ta sẽ sử dụng kho lưu trữ localForage (bạn có thể đọc thêm về cách sử dụng và ưu điểm của nó trong tài liệu) - một công cụ tương tự LocalStorage, được tất cả các trình duyệt hiện đại hỗ trợ. Về cơ bản, đây là sự kết hợp của một số công nghệ lưu trữ. Với cách sử dụng tương đối dễ dàng, nó cho phép lưu trữ khối lượng dữ liệu lớn, và nhiều loại dữ liệu khác nhau, bao gồm cả hình ảnh. Hãy cài đặt nó vào dự án của chúng ta. Nhập vào terminal:

npm i localforage

Hãy khởi động lại ứng dụng của chúng ta. Trong thư mục src, chúng ta sẽ tạo một tệp forStorage.js, trong đó sẽ chứa các hàm để làm việc với kho lưu trữ.

Vậy, hãy bắt đầu với hàm tải sản phẩm từ kho lưu trữ. Hãy thêm vào forStorage.js việc nhập thư viện và viết hàm getProducts để lấy sản phẩm:

import localforage from 'localforage';

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

Bên dưới sau mã hàm, chúng ta cũng sẽ thêm mã cho someNetwork, mô phỏng độ trễ mạng (lên đến 0.7 giây) để các hàm hoạt động bình thường. Nếu sản phẩm của chúng ta đã "được lưu vào bộ nhớ đệm", thì trong các hàm làm việc với kho lưu trữ sẽ không có độ trễ, nếu không, sẽ có độ trễ, bạn sẽ thấy sau này, cách nó hoạt động:

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

Hãy lấy ứng dụng mà bạn đã tạo trong các bài tập của các bài học trước. Cài đặt kho lưu trữ localForage vào ứng dụng.

Sử dụng tài liệu của bài học, hãy tạo tệp forStorage.js và viết trong đó hàm getStudents để lấy dữ liệu sinh viên từ kho lưu trữ.