Form til redigering af data i Redux

Nu har vi en reducer til at ændre data i store. I denne lektion opretter vi en form, som vi kan bruge til at redigere produktdata.

Lad os åbne vores produktapplikation og oprette filen EditProductForm.jsx i mappen products. Oprettelsen af komponenten EditProductForm vil være analog med NewProductForm, bortset fra nogle forskelle, som vi vil dvæle ved. Derfor skal du kopiere al koden fra NewProductForm.jsx og indsætte den i den oprettede fil EditProductForm.jsx. Lad os nu begynde fra starten.

Fjern importen af nanoid, her har vi ikke brug for at generere id. Erstat importen af productAdded med productUpdated, for her vil vi bruge en action til opdatering, og ikke til tilføjelse af et produkt.

Derefter ændrer vi navnet på vores komponentfunktion fra NewProductForm til EditProductForm.

Før vi opretter de lokale states i funktionen EditProductForm for name, desc, price og amount, lad os indsætte et par flere linjer kode. Som vi nævnte tidligere, behøver vi ikke at generere id her. Nu er vores opgave at få det fra dataene for det produkt, der skal redigeres. Vi har allerede gjort dette ved oprettelse af en separat side for produktet. Så, vi henter id ved hjælp af hooket useParams, og finder derefter det ønskede produkt ved hjælp af hooket useSelector (glem ikke at importere begge hooks i starten af filen):

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

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

Efter dette ændrer vi blokken med erklæringen af de lokale states. Nu er vi nødt til at sætte de data, der er hentet fra store, for produktet som startværdi. Sådan vil den første state se ud, rediger de tre resterende selv:

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

Efter tildeling af variablen for useDispatch lad os tilføje endnu en kodelinje denne gang for hooket useNavigate. Vi vil bruge det til at vende tilbage til produktets side, når brugeren gemmer ændringerne foretaget i formularen:

const navigate = useNavigate()

Importer også dette hook i starten af filen:

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

Derefter har vi håndteringsfunktionerne for inputfelter. Og efter dem er vi nødt til at rette funktionen onSaveProductClick. Nu vil vi ved klik sende actionen productUpdated med det modtagne id og de ændrede data som et objekt. Derefter tilføjer vi vores navigate for at gå til siden for det redigerede produkt:

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

Tilbage er kun at finde følgende linje i vores returnerede JSX:

<h2>Add a New Product</h2>

Og erstatte den med:

<h2>Edit Product</h2>

Åbn din applikation med studerende. Opret filen EditStudentForm.jsx på samme måde som NewStudentForm.jsx. Foretag ændringer i den, som vist i lektionen.