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;
}