Formulare și stări locale în Redux

În lecțiile anterioare am învățat să obținem date din store și să le afișăm în componentele React. În această lecție vom începe să adăugăm date noi. Vom face acest lucru cu ajutorul unui formular, pe care, după ce îl completează, vânzătorul va putea adăuga un nou produs.

Să începem cu faptul că nu are întotdeauna sens să folosim starea globală Redux. Există cazuri când pentru nevoile noastre putem crea stări locale. Vom numi stări locale acele stări care sunt utilizate în interiorul unei anumite componente pentru nevoi tehnice. Spre exemplu, pentru a ascunde sau afișa ceva la click pe un buton.

În cazul nostru, utilizatorul va introduce date în formular și, în mod natural, vom avea nevoie de stări pentru asta. Am putea folosi starea globală Redux, dar nu are sens, deoarece stările noastre vor funcționa doar într-un singur loc din aplicație, pentru formularul de adăugare a produsului. Regula principală pe care trebuie să o urmăm în acest caz - stările locale nu trebuie să funcționeze în afara componentei în care sunt create și în niciun caz să nu afecteze store-ul. O astfel de practică este adesea folosită la crearea de formulare.

Să deschidem folderul products din aplicația noastră cu produse, să creăm în el fișierul NewProductForm.jsx și să importăm în el hook-ul useState:

import { useState } from 'react'

Acum să creăm componenta cu formularul și să definim în ea stări obișnuite, așa cum am făcut în React anterior. Avem nevoie de stări pentru a lucra cu numele, descrierea, prețul și cantitatea produsului:

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

Apoi, să adăugăm procesarea standard pentru fiecare câmp atunci când utilizatorul introduce date:

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)

Și apoi să returnăm în componentă markup-ul cu titlu și un formular gol:

return (
	<div>
		<h2>Adaugă un Produs Nou</h2>
		<form>
		</form>
	</div>
)

Deschideți aplicația voastră cu studenții. Creați fișierul NewStudentForm.jsx în folderul students. Definiți în componenta NewStudentForm stări locale pentru câmpurile necesare, scrieți pentru fiecare câmp procesarea, așa cum este arătat în lecție.

Returnați în componenta NewStudentForm markup-ul care conține titlul și un formular gol.