Spreminjanje podatkov o izdelku v Redux shrambi

Naučili smo se dodajati izdelke, kaj pa če želimo spremeniti informacije o izdelku? Oglejmo si, kako to narediti v tej in naslednjih lekcijah.

Odprimo našo aplikacijo z izdelki in pojdimo v datoteko productsSlice.js. Začnimo s tem, da moramo za slice products napisati še en reducer, ki se bo sprožil pri posodobitvi izdelka. Poimenujmo ga productUpdated in ga dodajmo v polje reducers za reducerjem productAdded. Prav tako mu nemudoma podajmo parametra state in action, na podlagi katerih, kot se spomnimo, deluje reducer:

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

Zdaj pa pomislimo, kateri podatki bodo potrebni za posodobitev izdelka. Predvsem - to je id, po njem bomo lahko našli zanimivi izdelek v shrambi. Preostali podatki - naziv, opis, cena in količina so na voljo za spreminjanje. Vse te vrednosti bomo dobili iz lastnosti payload objekta action, ki bo prišel do nas, in če bi ga pisali ročno, bi bil videti tako, kot je prikazano spodaj. Upoštevajte, da je pričakovana vrednost lastnosti payload - en argument, zato bomo sem podali objekt (o tem bomo govorili v nadaljevanju):

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

Ko smo razjasnili glavne točke, lahko zdaj napišemo kodo za productUpdated v zavitih oklepajih. Najprej pridobimo iz objekta action spremenjene podatke:

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

Zdaj bomo po pridobljenem id našli izdelek, ki ga je treba spremeniti:

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

Če je bil tak izdelek najden v shrambi, potem bomo njegove podatke zamenjali z novimi vrednostmi:

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

Preostane nam le še izvoz action creatorja za uporabo v komponenti, ki ga bo prijazno ustvaril za nas createSlice. Dodajmo ga k izvozu na koncu datoteke, skupaj z obstoječim productAdded:

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