Zmena údajov produktu v Redux store

Naučili sme sa pridávať produkty, ale čo ak chceme zmeniť informácie o produkte? Poďme si v tejto a nasledujúcich lekciách pozrieť, ako to urobiť.

Otvorme našu aplikáciu s produktmi a prejdime do súboru productsSlice.js. Začnime tým, že pre slice products potrebujeme napísať ďalší reducer, ktorý sa spustí pri aktualizácii produktu. Pomenujeme ho productUpdated a pridáme do poľa reducers za reducer productAdded. Tiež mu hneď odovzdajme parametre state a action, na základe ktorých, ako si pamätáme, reducer funguje:

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

Teraz sa zamyslime, aké údaje budeme potrebovať na aktualizáciu produktu. Predovšetkým - to je id, podľa ktorého vieme nájsť produkt, ktorý nás zaujíma, v store. Ostatné údaje - názov, popis, cena a množstvo budú pre nás na zmenu. Všetky tieto hodnoty dostaneme z vlastnosti payload objektu action, ktorý k nám príde, a keby sme ho písali ručne, vyzeral by tak, ako je to znázornené nižšie. Všimnite si, že očakávaná hodnota vlastnosti payload je jeden argument, preto budeme odovzdávať sem objekt (o tom si povieme neskôr):

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

Po objasnení hlavných bodov teraz môžeme napísať do zložených zátvoriek kód pre productUpdated. Najprv získame z objektu action zmenené údaje:

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

Teraz nájdeme podľa získaného id produkt, ktorý je potrebné zmeniť:

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

Ak sa takýto produkt našiel v store, tak jeho údaje nahradíme novými hodnotami:

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

Zostáva nám už len exportovať action creator na použitie v komponente, ktorý za nás láskavo vytvorí createSlice. Pridajme ho na konci súboru k exportu, spolu s existujúcim productAdded:

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