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):

let 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:

const [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:

const navigate = useNavigate()

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

import { 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:

const 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:

<h2>Add a New Product</h2>

És lecserélni erre:

<h2>Edit Product</h2>

Nyissa meg a diák alkalmazását. Hozzon létre egy EditStudentForm.jsx fájlt a NewStudentForm.jsx fájl mintájára. Végyen benne módosításokat, ahogyan a leckében bemutatásra került.