Деректер қоймасына деректерді қосу 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);
}