Termék adatainak módosítása a Redux store-ban

Megtanultuk, hogyan kell termékeket hozzáadni, de mi van, ha módosítani szeretnénk a termék információit? Nézzük meg, hogyan tehetjük ezt meg ebben és a következő leckékben.

Nyissuk meg a termék alkalmazásunkat és menjünk a productsSlice.js fájlba. Kezdjük azzal, hogy a products slice-hoz írunk még egy reducer-t, amely akkor fut le, amikor egy terméket frissítünk. Nevezzük el productUpdated-nak és adjuk hozzá a reducers mezőhöz a productAdded reducer után. Átadunk neki paraméterként a state és action értékeket, amelyek alapján, ahogy emlékszünk, a reducer működik:

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

Most gondolkozzunk el azon, hogy milyen adatokra lesz szükségünk a termék frissítéséhez. Először is - ez a id, ezzel megtalálhatjuk a számunkra érdekes terméket a store-ban. A többi adat - név, leírás, ár és mennyiség lesz a módosítandó értékeink. Mindezeket az értékeket az action objektum payload tulajdonságából kapjuk meg, amely hozzánk ér, és ha mi írnánk a kezünkkel, akkor úgy nézne ki, ahogyan az alább látható. Vegye figyelembe, hogy a várt érték a payload tulajdonságnak - egy argumentum, ezért egy objektumot fogunk ide átadni (erről később beszélünk):

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

Miután tisztáztuk a főbb pontokat, most már írhatunk kódot a productUpdated kapcsos zárójelei közé. Először kapjuk meg a action objektumból a módosított adatokat:

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

Most megkeressük a kapott id alapján a terméket, amelyet módosítani kell:

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

Ha találtunk ilyen terméket a store-ban, akkor lecseréljük az adatait az új értékekre:

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

Már csak exportálnunk kell az action creator-t a komponensekben való használathoz, amit a createSlice készít el nekünk. Adjuk hozzá az exporthoz a fájl végén, a meglévő productAdded mellett:

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