Thêm dữ liệu vào kho lưu trữ trong React Router

Trong bài học này chúng ta sẽ thực hiện việc thêm một sản phẩm vào kho lưu trữ. Trước tiên chúng ta cần một hàm createProduct để tạo sản phẩm, hãy thêm nó vào forStorage.js sau hàm getProducts:

export async function createProduct() {}

Đầu tiên lại thêm someNetwork:

export async function createProduct() {
	await someNetwork();
}

Tiếp theo chúng ta sẽ cần một id duy nhất cho mỗi sản phẩm, bạn đã gặp điều này trong giáo trình React rồi. Hãy sử dụng thư viện nanoid cho việc này. Nhập lệnh sau vào terminal:

npm install --save nanoid

Import thư viện vào forStorage.js:

import { nanoid } from 'nanoid'

Hãy để id của chúng ta có 6 ký tự:

export async function createProduct() {
	await someNetwork();
	let id = nanoid(6);
}

Ban đầu khi tạo sản phẩm, trong đối tượng của chúng ta chỉ có id. Hãy gọi getProducts, thêm sản phẩm đã tạo và cập nhật danh sách sản phẩm của chúng ta trong kho lưu trữ. Xong:

export async function createProduct() {
	await someNetwork();
	let id = nanoid(6);
	let product = { id };
	let products = await getProducts();
	products.unshift(product);
	await setProducts(products);
	return product;
}

Hàm để cập nhật danh sách trong kho lưu trữ sẽ như sau (chúng ta sẽ đưa vào đó các sản phẩm với khóa products), hãy đặt nó sau hàm createProduct:

function setProducts(products) {
	return localforage.setItem('products', products);
}

Hãy lấy ứng dụng do bạn tạo trong các bài tập của những bài học trước. Sử dụng tài liệu của bài học, hãy viết trong forStorage.js hàm createStudent và setStudents để thêm dữ liệu sinh viên vào kho lưu trữ.