रिएक्ट रूटर में स्टोरेज में डेटा जोड़ना

इस पाठ में हम स्टोरेज में उत्पाद जोड़ने पर काम करेंगे। शुरुआत में हमें उत्पाद बनाने के लिए createProduct फ़ंक्शन की आवश्यकता है, इसे forStorage.js में getProducts फ़ंक्शन के बाद जोड़ते हैं:

forStorage.jsexport async function createProduct() {}

पहले फिर से someNetwork जोड़ते हैं:

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

इसके बाद हमें प्रत्येक उत्पाद के लिए यूनिक आईडी की आवश्यकता होगी, आप पहले ही रिएक्ट ट्यूटोरियल में इससे मिल चुके हैं। इसके लिए हम 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);
}