Актуализиране на данни чрез URL параметри в хранилището в React Router

В предишния урок добавихме още един маршрут и страница с форма за редактиране на данни. Остава ни да запазим данните, въведени във формата ни.

Като начало ще добавим функция за актуализиране на данните за продукт updateProduct във forStorage.js. Трябва да предадем в нея id на продукта и променените данни:

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

След това от хранилището по ключ 'products' ще получим продуктите и ще намерим този, който променяме, по неговия id. В случай на неуспех ще хвърлим грешка:

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

След това ще остане да внесем промените в намерения продукт и да презапишем актуализирания списък в хранилището с помощта на нашата функция 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;
}

Вземете приложението, създадено от вас в задачите към предишните уроци. Използвайки материалите от урока, добавете във файла forStorage.js функция updateStudent за актуализиране на данните за студент в хранилището.