React Router-এ ডেটা স্টোরেজে যোগ করা

এই পাঠে আমরা স্টোরেজে একটি পণ্য যোগ করার কাজ করব। শুরুতে আমাদের প্রয়োজন একটি ফাংশন 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 কল করি, জেনারেট করা পণ্যটি যোগ করি এবং স্টোরেজে আমাদের পণ্যের তালিকা আপডেট করি। সম্পন্ন:

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

স্টোরেজে তালিকা আপডেট করার ফাংশনটি নিম্নরূপ হবে (আমরা এটিকে products কী-এর অধীনে রাখব), এটিকে createProduct ফাংশনের পরে রাখি:

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

আপনি পূর্ববর্তী পাঠগুলোর অ্যাসাইনমেন্টে তৈরি করা অ্যাপ্লিকেশনটি নিন। পাঠের উপকরণ ব্যবহার করে, forStorage.js-এ createStudent এবং setStudents ফাংশন লিখুন স্টোরেজে শিক্ষার্থীদের ডেটা যোগ করার জন্য।