Промяна на данни за продукт в Redux store

Научихме се да добавяме продукти, а какво ако искаме да променим информацията за продукта? Нека разгледаме как да го направим в този и следващите уроци.

Нека отворим нашето приложение с продукти и да отидем във файла productsSlice.js. Ще започнем с това, че за slice products трябва да напишем още един reducer, който ще се стартира при актуализиране на продукт. Ще го наречем productUpdated и ще го добавим в полето reducers след reducer productAdded. Също ще му подадем веднага параметрите state и action, на базата на които, както си спомняме, работи reducer:

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