Az action objektum adatainak előkészítése Redux-ban

Nemrég arról beszéltünk, hogy a createSlice függvény egy argumentumot vár a action.payload létrehozásakor. Ez egyrészt leegyszerűsíti a használatát, másrészt viszont további lépésekhez vezethet az action objektum tartalmának előkészítése érdekében.

Nyissuk meg a termékek alkalmazásunkat, és benne a NewProductForm.jsx fájlt. Figyeljük meg a következő kódsort:

NewProductForm.jsxdispatch(productAdded({
  id: nanoid(), name, desc, price, amount
}))

Itt közvetlenül a React komponensben állítjuk össze a payload objektumot, és adjuk át a productAdded action-nek. Mi van, ha ugyanezt az actiont több komponensből is el kell küldenünk, vagy ha az összeállítási logika bonyolulttá válik? Elvileg a komponensünket nem kellene érdekelnie, hogy hogyan néz ki a payload objektum ehhez az actionhez. Ráadásul a kód állandó ismétlése sem elfogadható számunkra.

Ezeket a problémákat ismét a híres createSlice segíthet megoldani, mivel a reducer írásakor lehetővé teszi számunkra a prepare callback függvény használatát, amelyben különböző logikát írhatunk, véletlenszámokat generálhatunk és így tovább. Ebben az esetben a reducer mező értéke a következő objektum formájában is megadható:

jsx{reducer, prepare}

Nyissuk meg a productsSlice.js fájlt, és módosítsuk a productAdded reducer kódját. Most ez a kódrészlet:

products/ProductSlice.jsproductAdded(state, action) {
  state.push(action.payload)
},

Ezt fogjuk megváltoztatni a következőre, amelyben a reducer függvény a store állapotának frissítéséért felelős, a prepare pedig visszaadja a payload objektumot a generált id-val és egyéb adatainkkal:

products/ProductSlice.jsproductAdded: {
  reducer(state, action) {
    state.push(action.payload)
  },
  prepare(name, desc, price, amount) {
    return {
      payload: {
        id: nanoid(),
        name,
        desc,
        price,
        amount,
      },
    }
  },
},

Mivel most már itt generáljuk az id-t, és nem a komponensben, adjuk hozzá a nanoid-ot az importokhoz:

products/ProductSlice.jsimport { createSlice, nanoid } from '@reduxjs/toolkit'

Végül végezzük el a módosításokat a NewProductForm.jsx fájlban. A következő sor helyett:

products/NewProductForm.jsxdispatch(productAdded({
  id: nanoid(), name, desc, price, amount
}))

Ez lesz, ahol egyszerűen vesszővel elválasztva átadjuk a szükséges adatokat (ne felejtsük el ebben a fájlban eltávolítani a nanoid-ot az importokból):

products/NewProductForm.jsxdispatch(productAdded(name, desc, price, amount))

Indítsuk el az alkalmazást, majd hozzunk létre egy új terméket, és győződjünk meg arról, hogy nem rontottunk el semmit.