React Router'da ma'lumotlarni omborga qo'shish

Ushbu darsda biz mahsulotni omborga qo'shish bilan shug'ullanamiz. Boshlash uchun bizga mahsulot yaratish uchun createProduct funktsiyasi kerak, uni forStorage.js faylida getProducts funktsiyasidan keyin qo'shamiz:

export async function createProduct() {}

Avval yana someNetwork qo'shamiz:

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

Keyin esa har bir mahsulot uchun bizga noyob id kerak bo'ladi, buni siz React darsligida uchratgansiz. Buning uchun nanoid kutubxonasidan foydalanamiz. Terminalda quyidagi buyruqni kiriting:

npm install --save nanoid

Kutubxonani forStorage.js fayliga import qilamiz:

import { nanoid } from 'nanoid'

id lar 6 belgidan iborat bo'lsin:

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

Dastlab mahsulot yaratilganda uning obyektida faqat id bo'ladi. getProducts ni chaqiramiz, yaratilgan mahsulotni qo'shamiz va omborga mahsulotlar ro'yxatini yangilaymiz. Tayyor:

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

Ombordagi ro'yxatni yangilash funktsiyasi quyidagicha bo'ladi (biz unga mahsulotlarni products kaliti ostida kiritamiz), uni createProduct funktsiyasidan keyin joylashtiramiz:

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

Oldingi darslar uchun topshiriqlarda yaratgan ilovangizni oling. Dars materiallaridan foydalanib, forStorage.js faylida talabalarning ma'lumotlarini omborga qo'shish uchun createStudent va setStudents funktsiyalarini yozing.