Adatszerkesztő űrlap a Redux-ban

Most már van egy reducerünk az adatok módosításához a store-ban. Ezen a leckén létrehozunk egy űrlapot, amellyel szerkeszthetjük a termék adatait.

Nyissuk meg a termék alkalmazásunkat és hozzunk létre a products mappában a EditProductForm.jsx fájlt. A EditProductForm komponens létrehozása hasonló lesz a NewProductForm-hoz, néhány eltéréssel, amelyeknél megállunk. Ezért másolja át a teljes kódot a NewProductForm.jsx fájlból és illessze be a létrehozott EditProductForm.jsx fájlba. Most kezdjük sorban.

Távolítsa el az importból a nanoid-ot, itt nem kézzel generálunk id-t. Cserélje le az productAdded importját productUpdated-re, mert itt a frissítéshez szükséges action-t fogjuk használni, nem a hozzáadáshoz szükségest.

Ezután módosítsuk a komponensünk függvényének a nevét NewProductForm-ról EditProductForm-ra.

Mielőtt létrehoznánk a lokális state-eket a EditProductForm függvényben a name, desc, price és amount számára, illesszünk be még néhány sort kódot. Ahogy korábban említettük, itt nem kell id-t generálnunk. Most a feladatunk, hogy a módosítandó termék adataiból szerezzük be azt. Ezt már megtettük a termék külön oldalának létrehozásakor. Tehát, szerezzük meg az id-t a useParams hook segítségével, majd keressük meg a kívánt terméket a useSelector hook használatával (ne felejtsd el importálni mindkét hook-ot a fájl elején):

products/EditProductForm.jsxlet params = useParams()
const { productId } = params

const product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

Ezután módosítsuk a lokális state-ek deklarálásával rendelkező blokkot. Most kezdő értéknek a store-ból kapott termék adatait kell beállítanunk. Így fog kinézni az első state, alakítsa át a maradék hármat maga:

products/EditProductForm.jsxconst [name, setName] = useState(product.name)

A useDispatch változó beállítása után illesszünk be még egy sort kódot ezúttal a useNavigate hook számára. Ezt fogjuk használni a visszatéréshez a termék oldalára, amikor a felhasználó elmenti az űrlapban végzett módosításokat:

products/EditProductForm.jsxconst navigate = useNavigate()

Importáld ezt a hook-ot is a fájl elején:

products/EditProductForm.jsximport { useNavigate, useParams } from 'react-router-dom'

Ezután jönnek a beviteli mezők kezelői. Ezek után pedig módosítanunk kell a onSaveProductClick függvényt. Most már ebben kattintáskor elküldjük a productUpdated action-t a kapott id-val és a módosított adatokkal objektum formájában. Ezután hozzáadjuk a navigate-ünket az át navigáláshoz a módosított termék oldalára:

products/EditProductForm.jsxconst onSaveProductClick = () => {
  if (name && desc && price && amount) {
    dispatch(
      productUpdated({
        id: productId,
        name,
        desc,
        price,
        amount,
      })
    );
    
    navigate(`/products/${productId}`);
  }
}

Már csak a visszaadott JSX-ben kell megtalálnunk a következő sort:

products/EditProductForm.jsx<h2>Add a New Product</h2>

És lecserélni erre:

products/EditProductForm.jsx<h2>Edit Product</h2>