React Router හි ගබඩාවට දත්ත එකතු කිරීම

මෙම පාඩමේදී අපි ගබඩාවට නිෂ්පාදනයක් එකතු කිරීම සමඟ කටයුතු කරමු. මුලින්ම අපට අවශ්‍ය වන්නේ නිෂ්පාදනයක් සෑදීම සඳහා createProduct ශ්‍රිතයයි, එය forStorage.js හි getProducts ශ්‍රිතයට පසුව එකතු කරමු:

forStorage.jsexport async function createProduct() {}

මුලින්ම නැවතත් someNetwork එකතු කරමු:

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

ඊළඟට අපට අවශ්‍ය වනු ඇත්තේ අනන්‍ය අංකයක් සෑම නිෂ්පාදනයක් සඳහාම, ඔබ දැනටමත් මෙය 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);
}