Изменение данных продукта в Redux store
Мы научились добавлять продукты, а что если мы захотим изменить информацию о продукте? Давайте рассмотрим как это сделать в этом и последующих уроках.
Откроем наше приложение с продуктами
и зайдем в файл productsSlice.js. Начнем
с того, что нам нужно для слайса products
написать еще один reducer, который
будет запускаться при обновлении продукта.
Назовем его productUpdated и добавим в поле
reducers после редьюсера productAdded. Также
передадим ему сразу параметрами state и
action, на основе которых, как мы помним,
работает редьюсер:
reducers: {
productAdded(state, action) {
state.push(action.payload)
},
productUpdated(state, action) {},
},
Теперь давайте подумаем, какие данные нам
понадобятся для обновления продукта. Прежде
всего - это id, по нему мы сможем найти
интересующий нас продукт в store. Остальные
данные - название, описание, цена и количество
будут у нас для изменения. Все эти значения
мы получим из свойства payload объекта action,
который нам придет, и если бы мы писали
его руками, то он бы выглядел так, как показано
ниже. Заметьте, что ожидаемое значение
свойства payload - один аргумент, поэтому мы будем
передавать сюда объект (об этом мы поговорим в
дальнейшем):
{
type: 'products/productUpdated',
payload: {id, name, desc, price, amount}
}
Выяснив основные моменты, теперь мы можем
написать в фигурных скобочках код для
productUpdated. Сначала получим из
объекта action измененные данные:
productUpdated(state, action) {
const { id, name, desc, price, amount } = action.payload
},
Теперь мы найдем по полученному id продукт,
который нужно изменить:
productUpdated(state, action) {
const { id, name, desc, price, amount } = action.payload
const desiredProduct = state.find(product => product.id === id)
},
Если такой продукт нашелся в store, то мы заменим его данные новыми значениями:
productUpdated(state, action) {
const { id, name, desc, price, amount } = action.payload
const desiredProduct = state.find(product => product.id === id)
if (desiredProduct) {
desiredProduct.name = name
desiredProduct.desc = desc
desiredProduct.price = price
desiredProduct.amount = amount
}
},
Нам остается только экспортировать action
creator для использования в компоненте,
который любезно создаст за нас createSlice.
Давайте добавим его к экспорту в конце файла,
наряду с существующим productAdded:
export const { productAdded, productUpdated } = productsSlice.actions
Откройте ваше приложение со студентами.
Изучив материал урока, в файле studentsSlice.js
допишите еще один reducer для productsSlice,
который будет обновлять данные студента в
store в случае их изменения пользователем.
Назовите его studentUpdated.
А как бы выглядел в этом случае ваш объект action? Пришлите его код в ответе.
В конце файла экспортируйте полученный
action creator studentUpdated.