Izmena podataka proizvoda u Redux store-u

Naučili smo kako da dodajemo proizvode, ali šta ako želimo da promenimo informacije o proizvodu? Hajde da razmotrimo kako to da uradimo u ovoj i narednim lekcijama.

Otvorimo našu aplikaciju sa proizvodima i idemo u fajl productsSlice.js. Počećemo od toga da nam je za slice products potrebno napisati još jedan reducer, koji će se pokrenuti pri ažuriranju proizvoda. Nazvaćemo ga productUpdated i dodati u polje reducers posle reducer-a productAdded. Takođe prosledićemo mu odmah parametre state i action, na osnovu kojih, kao što se sećamo, radi reducer:

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

Sada hajde da razmislimo, koji podaci će nam biti potrebni za ažuriranje proizvoda. Pre svega - to je id, po njemu ćemo moći da nađemo proizvod koji nas zanima u store-u. Ostali podaci - naziv, opis, cena i količina biće nam za promenu. Sve ove vrednosti dobićemo iz svojstva payload objekta action, koji će nam stići, i, ako bismo ga pisali ručno, onda bi izgledao kao što je prikazano ispod. Obratite pažnju da je očekivana vrednost svojstva payload - jedan argument, zato ćemo proslediti ovde objekat (o tome ćemo govoriti ubuduće):

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

Nakon što smo razjasnili osnovne tačke, sada možemo napisati u vitičastim zagradama kod za productUpdated. Prvo ćemo dobiti iz objekta action izmenjene podatke:

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

Sada ćemo pronaći po dobijenom id proizvod, koji treba izmeniti:

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

Ako je takav proizvod pronađen u store-u, onda ćemo zameniti njegove podatke novim vrednostima:

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
  }
},

Ostaje nam samo da eksportujemo action creator za korišćenje u komponenti, što će za nas ljubazno kreirati createSlice. Hajde da ga dodamo u eksport na kraju fajla, uz postojeći productAdded:

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