Andmete redigeerimise vorm Reduxis

Nüüd on meil reduktor, et muuta andmeid poes. Sellel tunnil loome vormi, mille abil saame redigeerida toote andmeid.

Avame oma tooterakenduse ja loome kaustas products faili EditProductForm.jsx. Komponendi EditProductForm loomine on sarnane NewProductForm-ga, välja arvatud mõned erinevused, millel me peatume. Seetõttu kopeerige täielikult NewProductForm.jsx kood ja kleepige see loodud faili EditProductForm.jsx. Nüüd alustame järjekorras.

Eemaldage importimisest nanoid, siin meil ei ole vaja id-d genereerida. Asendage import productAdded asemel productUpdated, sest siin me kasutame tegevust uuendamiseks, mitte lisamiseks tootele.

Järgmisena muudame oma komponendi funktsiooni nime NewProductForm asemel EditProductForm.

Enne kui seame kohalikud olekud funktsioonis EditProductForm name, desc, price ja amount jaoks, lisame veel mõne koodirea. Nagu me varem mainisime, siin meil ei ole vaja id-d genereerida. Nüüd on meie ülesanne saada see muudetava toote andmetest. Me oleme seda juba teinud luues toote jaoks eraldi lehe. Niisiis, saame id hooki useParams abil, ja siis leiame vajaliku toote, kasutades hooki useSelector (ärge unustage importida mõlemad hookid faili alguses):

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

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

Pärast seda muudame kohalike olekute deklaratsiooni plokki. Nüüd peame algväärtustena määrama neile poest saadud toote andmed. Esimene olek näeb välja selline, muutke kolm ülejäänud ise:

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

Pärast muutuja määramist useDispatch jaoks lisame veel ühe koodirea seekord hooki useNavigate jaoks. Me kasutame seda lehele naasmiseks tootega, kui kasutaja salvestab vormis tehtud muudatused:

const navigate = useNavigate()

Impordime selle hooki ka faili alguses:

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

Järgmisena on meil töötlejad sisendväljade jaoks. Ja pärast neid peame korrigeerima funktsiooni onSaveProductClick. Nüüd saadame me selles klõpsamisel tegevuse productUpdated saadud id-ga ja muudetud andmetega objekti kujul. Pärast lisame oma navigate, et minna muudetud toote lehele:

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

Jääb üle vaid meie tagastatavas veerus leida rida:

<h2>Add a New Product</h2>

Ja asendada see:

<h2>Edit Product</h2>

Avage oma üliõpilaste rakendus. Looge fail EditStudentForm.jsx analoogia põhjal NewStudentForm.jsx-ga. Tehke sisse selle muudatusi, nagu on näidatud tunnis.