Дар 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);
}