Datu atjaunināšana pēc URL parametriem React Router krātuvē

Iepriekšējā nodarbībā mēs pievienojām vēl vienu maršrutu un lapu ar formu datu rediģēšanai. Mums atliek saglabāt datos ievadītos datus.

Vispirms pievienosim funkciju datu atjaunināšanai produktam updateProduct forStorage.js. Mums ir jānodod tajā id produktam un izmainītie dati:

export async function updateProduct(id, updates) {
	await someNetwork();
}

Tālāk no krātuves atslēgā 'products' iegūstam produktus un atrodam to, kuru mēs mainām pēc tā id. Neveiksmes gadījumā izmetīsim kļūdu:

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

Pēc tam mums atliek veikt izmaiņas atrastajā produktā un pārrakstīt atjaunināto sarakstu krātuvē, izmantojot mūsu funkciju setProducts:

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

Paņemiet lietotni, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Izmantojot nodarbības materiālus, pievienojiet failā forStorage.js funkciju updateStudent studenta datu atjaunināšanai krātuvē.