Skjema for redigering av data i Redux

Nå har vi en reducer for å endre data i store. I denne leksjonen vil vi lage et skjema som vi kan bruke til å redigere produktdata.

La oss åpne produktapplikasjonen vår og opprette filen EditProductForm.jsx i mappen products. Opprettelsen av komponenten EditProductForm vil være analog med NewProductForm, med unntak av noen forskjeller som vi vil fokusere på. Derfor, kopier all koden fra NewProductForm.jsx og lim den inn i den opprettede filen EditProductForm.jsx. La oss nå begynne i rekkefølge.

Fjern importen av nanoid, vi trenger ikke generere id her. Erstatt importen av productAdded med productUpdated, fordi her vil vi bruke action for oppdatering, og ikke for tilføyelse av produkt.

Deretter endrer vi navnet på funksjonen til vår komponent fra NewProductForm til EditProductForm.

Før vi setter opp de lokale statene i funksjonen EditProductForm for name, desc, price og amount, la oss sette inn noen flere kodelinjer. Som vi nevnte tidligere, trenger vi ikke generere id her. Nå er vår oppgave å få den fra dataene til det endrede produktet. Vi har allerede gjort dette da vi opprettet en separat side for produktet. Så, la oss hente id ved hjelp av hooken useParams, og deretter finne det produktet vi trenger, ved å bruke hooken useSelector (ikke glem å importere begge hookene i starten av filen):

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

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

Etter dette endrer vi blokken med deklarasjonen av de lokale statene. Nå må vi sette de innhentede dataene fra store som startverdi. Slik vil den første staten se ut, endre de tre gjenværende selv:

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

Etter tilordningen av variabelen for useDispatch la oss sette inn en kodelinje til denne gangen for hooken useNavigate. Vi vil bruke den for å returnere til siden med produktet når brukeren lagrer endringene gjort i skjemaet:

const navigate = useNavigate()

Importer også denne hooken i starten av filen:

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

Deretter har vi behandlerne for inndatafeltene. Og etter dem må vi justere funksjonen onSaveProductClick. Nå vil vi ved klikk sende actionen productUpdated med den innhentede id-en og de endrede dataene som et objekt. Deretter legger vi til navigate for overgang til siden til det endrede produktet:

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

Da gjenstår det bare å finne linjen i vår returnerte oppsett:

<h2>Add a New Product</h2>

Og erstatte den med:

<h2>Edit Product</h2>

Åpne applikasjonen din med studenter. Opprett filen EditStudentForm.jsx på samme måte som NewStudentForm.jsx. Gjør endringer i den, som vist i leksjonen.