การเพิ่มข้อมูลลงใน storage ใน React Router

ในบทเรียนนี้เราจะทำการเพิ่มผลิตภัณฑ์ลงใน storage ก่อนอื่นเราต้องการฟังก์ชัน createProduct สำหรับสร้างผลิตภัณฑ์ เพิ่มมันเข้าไปใน forStorage.js หลังฟังก์ชัน getProducts:

export async function createProduct() {}

เริ่มต้นด้วยการเพิ่ม someNetwork อีกครั้ง:

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

จากนั้นเราจะต้องมี id ที่ไม่ซ้ำกัน สำหรับแต่ละผลิตภัณฑ์ คุณเคยพบเจอสิ่งนี้แล้วในบทเรียน React เราจะใช้ไลบรารี nanoid สำหรับการนี้ ในเทอร์มินัลให้ป้อนคำสั่งต่อไปนี้:

npm install --save nanoid

นำเข้าไลบรารีลงใน forStorage.js:

import { nanoid } from 'nanoid'

ให้ id ของเรามี 6 อักขระ:

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

ในตอนเริ่มต้นเมื่อสร้างผลิตภัณฑ์ ในออบเจ็กต์ของเราจะมีแค่ id เท่านั้น เรียกใช้ getProducts เพิ่มผลิตภัณฑ์ที่สร้างขึ้นและอัปเดตรายการผลิตภัณฑ์ของเราใน storage เสร็จแล้ว:

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

ฟังก์ชันสำหรับอัปเดตรายการใน storage จะเป็นดังนี้ (เราจะใส่ผลิตภัณฑ์ลงไปภายใต้คีย์ products) วางมันหลังฟังก์ชัน createProduct:

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

นำแอปพลิเคชันที่คุณสร้างขึ้นในการมอบหมายงานบทเรียนที่ผ่านมา ใช้เนื้อหาจากบทเรียน เขียนฟังก์ชัน createStudent และ setStudents ใน forStorage.js สำหรับเพิ่มข้อมูลนักเรียนลงใน storage