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

এই পাঠে আমরা স্টোরেজে একটি পণ্য যোগ করার কাজ করব। শুরুতে আমাদের প্রয়োজন একটি ফাংশন createProduct পণ্য তৈরি করার জন্য, এটিকে forStorage.js-এ getProducts ফাংশনের পরে যোগ করি:

forStorage.jsexport async function createProduct() {}

প্রথমে আবার someNetwork যোগ করি:

forStorage.jsexport async function createProduct() {
  await someNetwork();
}

এরপর আমাদের প্রতিটি পণ্যের জন্য প্রয়োজন হবে একটি অনন্য id, আপনি এটি React টিউটোরিয়ালে আগেও দেখেছেন। এর জন্য আমরা ব্যবহার করব nanoid লাইব্রেরি। টার্মিনালে নিম্নলিখিত কমান্ডটি লিখুন:

terminalnpm install --save nanoid

forStorage.js-এ লাইব্রেরি ইম্পোর্ট করি:

forStorage.jsimport { nanoid } from 'nanoid'

আমাদের id 6 অক্ষরের হোক:

forStorage.jsexport async function createProduct() {
  await someNetwork();
  let id = nanoid(6);
}

প্রাথমিকভাবে একটি পণ্য তৈরি করার সময় আমাদের অবজেক্টে শুধুমাত্র id থাকবে। আসুন getProducts কল করি, জেনারেট করা পণ্যটি যোগ করি এবং স্টোরেজে আমাদের পণ্যের তালিকা আপডেট করি। সম্পন্ন:

forStorage.jsexport 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 ফাংশনের পরে রাখি:

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