Formulár na úpravu údajov v Reduxe

Teraz máme reduktor na zmenu údajov v store. V tejto lekcii vytvoríme formulár, pomocou ktorého budeme môcť upravovať údaje produktu.

Otvorme našu aplikáciu s produktmi a vytvorme v priečinku products súbor EditProductForm.jsx. Vytvorenie komponentu EditProductForm bude analogické ako NewProductForm, s výnimkou niektorých rozdielov, na ktorých sa budeme zastavovať. Preto skopírujte celý kód NewProductForm.jsx a vložte ho do vytvoreného súboru EditProductForm.jsx. Teraz začnime postupne.

Odstráňte z importu nanoid, tu nám nie je potrebné generovať id. Nahraďte import productAdded na productUpdated, pretože tu budeme používať action na aktualizáciu, a nie na pridanie produktu.

Ďalej zmeňme názov funkcie nášho komponentu z NewProductForm na EditProductForm.

Predtým, ako zavedieme lokálne stavy vo funkcii EditProductForm pre name, desc, price a amount, vložme ešte niekoľko riadkov kódu. Ako sme už spomenuli skôr, tu nám nie je potrebné generovať id. Teraz našou úlohou je získať ho z údajov upravovaného produktu. Už sme to robili pri vytváraní separátnej stránky pre produkt. Takže, získame id pomocou hooku useParams, a potom nájdeme potrebný produkt, použitím hooku useSelector (nezabudnite importovať oba hooky na začiatku súboru):

let params = useParams()
const { productId } = params

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

Potom zmeňme blok s deklaráciou lokálnych stavov. Teraz potrebujeme ako počiatočnú hodnotu zadať im získané údaje produktu z store. Takto bude vyzerať prvý stav, zvyšné tri upravte sami:

const [name, setName] = useState(product.name)

Po priradení premennej pre useDispatch pridajme ešte jeden riadok kódu tentoraz pre hook useNavigate. Budeme ho používať na návrat na stránku s produktom, keď používateľ uloží vykonané zmeny vo formulári:

const navigate = useNavigate()

Tiež importujme tento hook na začiatku súboru:

import { useNavigate, useParams } from 'react-router-dom'

Ďalej máme obsluhy pre vstupné polia. A po nich nám je potrebné opraviť funkciu onSaveProductClick. Teraz v nej pri kliknutí budeme odosielať akciu productUpdated so získaným id a zmenenými údajmi vo forme objektu. Potom pridáme náš navigate, na prechod na stránku upraveného produktu:

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

Ostáva už len v našej vracanej verstke nájsť riadok:

<h2>Add a New Product</h2>

A nahradiť ho na:

<h2>Edit Product</h2>

Otvorte vašu aplikáciu so študentmi. Vytvorte súbor EditStudentForm.jsx podľa analógie s NewStudentForm.jsx. Vykonajte v ňom zmeny, ako je ukázané v lekcii.