Изменение данных продукта в Redux store

Мы научились добавлять продукты, а что если мы захотим изменить информацию о продукте? Давайте рассмотрим как это сделать в этом и последующих уроках.

Откроем наше приложение с продуктами и зайдем в файл productsSlice.js. Начнем с того, что нам нужно для слайса products написать еще один reducer, который будет запускаться при обновлении продукта. Назовем его productUpdated и добавим в поле reducers после редьюсера productAdded. Также передадим ему сразу параметрами state и action, на основе которых, как мы помним, работает редьюсер:

products/productsSlice.jsreducers: {
  productAdded(state, action) {
    state.push(action.payload)
  },
  productUpdated(state, action) {},
},

Теперь давайте подумаем, какие данные нам понадобятся для обновления продукта. Прежде всего - это id, по нему мы сможем найти интересующий нас продукт в store. Остальные данные - название, описание, цена и количество будут у нас для изменения. Все эти значения мы получим из свойства payload объекта action, который нам придет, и, если бы мы писали его руками, то он бы выглядел так, как показано ниже. Заметьте, что ожидаемое значение свойства payload - один аргумент, поэтому мы будем передавать сюда объект (об этом мы поговорим в дальнейшем):

jsx{
  type: 'products/productUpdated',
  payload: {id, name, desc, price, amount}
}

Выяснив основные моменты, теперь мы можем написать в фигурных скобках код для productUpdated. Сначала получим из объекта action измененные данные:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
},

Теперь мы найдем по полученному id продукт, который нужно изменить:

products/productsSlice.jsproductUpdated(state, action) {
  const { id, name, desc, price, amount } = action.payload
  const desiredProduct = state.find(product => product.id === id)
},

Если такой продукт нашелся в store, то мы заменим его данные новыми значениями:

products/productsSlice.jsproductUpdated(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:

products/productsSlice.jsexport const { productAdded, productUpdated } = productsSlice.actions