Деректерді React Router-дегі URL параметрлері бойынша қоймада жаңарту

Алдыңғы сабақта біз тағы бір бағытталу жолын және деректерді өңдеу формасы бар бетшекті қостық. Бізге формаға енгізілген деректерді сақтау қалды.

Алдымен өнім деректерін жаңарту функциясын updateProduct forStorage.js файлына қосамыз. Біз оған өнімнің id және өзгертілген деректерді беруіміз керек:

forStorage.jsexport async function updateProduct(id, updates) {
  await someNetwork();
}

Содан кейін қоймадан 'products' кілті бойынша өнімдерді алып, оның id бойынша өзгертілетінін табамыз. Сәтсіздік жағдайында қате жібереміз:

forStorage.jsexport async function updateProduct(id, updates) {
  await someNetwork();
  let products = await localforage.getItem('products');
  let product = products.find((product) => product.id === id);
  if (!product) throw new Error('No product found for this', id);        
}

Содан кейін бізге табылған өнімге өзгерістер енгізу және жаңартылған тізімді setProducts функциясын қолданып қоймаға қайта жазу қалады:

forStorage.jsexport async function updateProduct(id, updates) {
  await someNetwork();
  let products = await localforage.getItem('products');
  let product = products.find((product) => product.id === id);
  if (!product) throw new Error('No product found for this', id);
  Object.assign(product, updates);
  await setProducts(products);
  return product;
}
Задание 1

Алдыңғы сабақтардың тапсырмаларында жасаған қолданбаңызды алыңыз. Сабақ материалын пайдаланып, forStorage.js файлына студент деректерін қоймада жаңарту үшін updateStudent функциясын қосыңыз.