Menambah Data ke Stor dalam React Router

Dalam pelajaran ini, kita akan menguruskan penambahan produk ke dalam stor. Untuk bermula, kita memerlukan fungsi createProduct untuk mencipta produk, mari tambahkannya dalam forStorage.js selepas fungsi getProducts:

export async function createProduct() {}

Pertama sekali, tambahkan someNetwork sekali lagi:

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

Seterusnya, kita akan memerlukan id unik untuk setiap produk, anda telah bertemu dengan ini dalam tutorial React. Mari gunakan pustaka nanoid untuk tujuan ini. Taipkan perintah berikut dalam terminal:

npm install --save nanoid

Import pustaka ke dalam forStorage.js:

import { nanoid } from 'nanoid'

Mari kita tetapkan id kepada 6 aksara:

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

Pada asalnya semasa mencipta produk, kita hanya akan mempunyai id dalam objek. Panggil getProducts, tambahkan produk yang dijana dan kemas kini senarai produk kita dalam stor. Selesai:

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

Fungsi untuk mengemas kini senarai dalam stor adalah seperti berikut (kita akan memasukkannya ke dalam produk di bawah kunci products), letakkannya selepas fungsi createProduct:

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

Ambil aplikasi yang anda buat dalam tugasan untuk pelajaran lepas. Dengan menggunakan bahan pelajaran, tulis dalam forStorage.js fungsi createStudent dan setStudents untuk menambah data pelajar ke stor.