Formulier voor het bewerken van gegevens in Redux

Nu hebben we een reducer om gegevens in de store te wijzigen. In deze les maken we een formulier waarmee we de productgegevens kunnen bewerken.

Laten we onze productenapplicatie openen en in de map products het bestand EditProductForm.jsx aanmaken. Het maken van de component EditProductForm is analoog aan NewProductForm, met uitzondering van enkele verschillen waar we bij stil zullen staan. Daarom kopieert u volledig de code van NewProductForm.jsx en plakt u deze in het gemaakte bestand EditProductForm.jsx. Laten we nu beginnen.

Verwijder de import van nanoid, hier hebben we geen id nodig. Vervang de import productAdded door productUpdated, want hier gebruiken we een action voor het updaten, niet voor het toevoegen van een product.

Vervolgens veranderen we de naam van onze componentfunctie van NewProductForm naar EditProductForm.

Voordat we lokale states in de functie EditProductForm aanmaken voor name, desc, price en amount, laten we nog een paar regels code invoegen. Zoals we eerder al noemden, hoeven we hier geen id te genereren. Nu is onze taak om deze te halen uit de gegevens van het te wijzigen product. We hebben dit al gedaan bij het maken van een aparte pagina voor een product. Dus, we halen de id met behulp van de hook useParams, en vinden dan het gewenste product, met behulp van de hook useSelector (vergeet niet beide hooks aan het begin van het bestand te importeren):

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

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

Daarna veranderen we het blok met de declaratie van de lokale states. Nu moeten we als beginwaarde de uit de store verkregen productgegevens instellen. Zo ziet de eerste state eruit, verbouw de drie overgebleven states zelf:

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

Na het toewijzen van de variabele voor useDispatch laten we nog een regel code toevoegen dit keer voor de hook useNavigate. We zullen deze gebruiken om terug te keren naar de pagina van het product wanneer de gebruiker de in het formulier aangebrachte wijzigingen opslaat:

const navigate = useNavigate()

Importeer deze hook ook aan het begin van het bestand:

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

Vervolgens hebben we de handlers voor de invoervelden. En daarna moeten we de functie onSaveProductClick aanpassen. Nu zullen we er bij een klik de action productUpdated mee sturen met de verkregen id en gewijzigde gegevens als een object. Daarna voegen we onze navigate toe, om over te gaan naar de pagina van het gewijzigde product:

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

Het enige dat overblijft is in onze terugkerende opmaak de regel te vinden:

<h2>Add a New Product</h2>

En deze te vervangen door:

<h2>Edit Product</h2>

Open uw applicatie met studenten. Maak het bestand EditStudentForm.jsx aan analoog aan NewStudentForm.jsx. Breng daarin wijzigingen aan, zoals getoond in de les.