Formulieren en lokale states in Redux

In eerdere lessen hebben we geleerd hoe we gegevens uit de store kunnen halen en weergeven in een React component. In deze les beginnen we met het toevoegen van nieuwe gegevens. We doen dit met behulp van een formulier, waarmee de verkoper een nieuw product kan toevoegen.

Laten we beginnen met het feit dat het niet altijd zinvol is om de globale Redux state te gebruiken. Er zijn gevallen waarin we voor onze behoeften lokale states kunnen aanmaken. Met lokale states bedoelen we states die binnen een specifieke component worden gebruikt voor technische doeleinden. Bijvoorbeeld om iets te verbergen of te tonen op basis van een knop.

In ons geval zal de gebruiker gegevens in een formulier invoeren, en daarvoor hebben we natuurlijk states nodig. We zouden de globele Redux state kunnen gebruiken, maar daar is geen zin in, omdat onze states alleen zullen werken op één plek in de applicatie, voor het formulier om een product toe te voegen. De hoofdregel die we hierbij moeten volgen, is dat lokale states niet buiten de component mogen werken waarin ze zijn aangemaakt, en in geen geval de store mogen beïnvloeden. Zo'n praktijk wordt vaak gebruikt bij het aanmaken van formulieren.

Laten we de map products van onze applicatie met producten openen, daarin een bestand NewProductForm.jsx aanmaken en de hook useState importeren:

import { useState } from 'react'

Laten we nu de component zelf met het formulier aanmaken en er gewone states in definiëren, zoals we dat eerder in React deden. We hebben states nodig voor de naam, beschrijving, prijs en hoeveelheid van het product:

export const NewProductForm = () => {
	const [name, setName] = useState('')
	const [desc, setDesc] = useState('')
	const [price, setPrice] = useState(0)
	const [amount, setAmount] = useState(0)
}

Vervolgens voegen we de standaard verwerking toe voor elk veld wanneer de gebruiker gegevens invoert:

const onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)

En dan retourneren we in de component de opmaak met een titel en een leeg formulier:

return (
	<div>
		<h2>Voeg een Nieuw Product Toe</h2>
		<form>
		</form>
	</div>
)

Open je applicatie met studenten. Maak een bestand NewStudentForm.jsx aan in de map students. Definieer in de component NewStudentForm lokale states voor de nodige velden, schrijf voor elk veld een verwerking, zoals getoond in de les.

Retourneer in de component NewStudentForm de opmaak, met daarin een titel en een leeg formulier.