Menambahkan Data ke Penyimpanan di React Router

Dalam pelajaran ini kita akan menangani penambahan produk ke penyimpanan. Pertama-tama kita membutuhkan fungsi createProduct untuk membuat produk, mari tambahkan ke forStorage.js setelah fungsi getProducts:

export async function createProduct() {}

Pertama-tama tambahkan lagi someNetwork:

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

Selanjutnya kita akan membutuhkan id unik untuk setiap produk, Anda sudah pernah menemui ini dalam tutorial React. Mari gunakan library nanoid untuk ini. Ketikkan perintah berikut di terminal:

npm install --save nanoid

Impor library ke forStorage.js:

import { nanoid } from 'nanoid'

Mari kita buat id sepanjang 6 karakter:

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

Awalnya saat membuat produk, kita hanya akan memiliki id dalam objek. Panggil getProducts, tambahkan produk yang dihasilkan dan perbarui daftar produk kita di penyimpanan. 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 memperbarui daftar di penyimpanan akan seperti berikut (kita akan memasukkannya ke dalamnya produk dengan kunci products), tempatkan setelah fungsi createProduct:

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

Ambil aplikasi yang Anda buat di tugas untuk pelajaran sebelumnya. Dengan menggunakan materi pelajaran, tulis di forStorage.js fungsi createStudent dan setStudents untuk menambahkan data siswa ke penyimpanan.