Обновление данных по 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 для обновления
данных студента в хранилище.