Formular pentru editarea datelor în Redux

Acum avem un reducer pentru modificarea datelor în store. În această lecție vom crea un formular, cu ajutorul căruia vom putea edita datele produsului.

Să deschidem aplicația noastră cu produsele și să creăm în folderul products fișierul EditProductForm.jsx. Crearea componentului EditProductForm va fi analogă cu NewProductForm, cu excepția unor diferențe, pe care ne vom opri. Prin urmare copiați integral codul NewProductForm.jsx și lipiți-l în fișierul creat EditProductForm.jsx. Acum să începem pe rând.

Eliminați din import nanoid, aici nu avem nevoie să generăm id. Înlocuiți importul productAdded cu productUpdated, deoarece aici vom folosi action pentru actualizare, nu pentru adăugarea produsului.

În continuare vom schimba numele funcției componentului nostru din NewProductForm în EditProductForm.

Înainte de a introduce stările locale în funcția EditProductForm pentru name, desc, price și amount, să inserăm încă câteva rânduri de cod. După cum am menționat anterior, aici nu avem nevoie să generăm id. Acum sarcina noastră este să îl obținem din datele produsului care se modifică. Am făcut deja acest lucru la crearea paginii separate pentru produs. Deci, obținem id-ul folosind hook-ul useParams, apoi găsim produsul de care avem nevoie, folosind hook-ul useSelector (nu uitați să importați ambele hook-uri la începutul fișierului):

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

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

După aceasta vom modifica blocul cu declararea stărilor locale. Acum avem nevoie ca valoarea inițială să fie datele produsului obținute din store. Așa va arăta prima stare, restul de trei le puteți reface singuri:

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

După atribuirea variabilei pentru useDispatch să inserăm încă un rând de cod de data aceasta pentru hook-ul useNavigate. Îl vom folosi pentru a reveni la pagina cu produsul, când utilizatorul salvează modificările aduse în formular:

const navigate = useNavigate()

De asemenea, importați acest hook la începutul fișierului:

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

În continuare avem handlerii pentru câmpurile de introducere. Și după ei este necesar să corectăm funcția onSaveProductClick. Acum în ea la click vom trimite acțiunea productUpdated cu id-ul obținut și datele modificate sub formă de obiect. După aceasta vom adăuga navigate, pentru trecerea la pagina produsului modificat:

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

Rămâne doar în markup-ul returnat să găsim rândul:

<h2>Add a New Product</h2>

Și să îl înlocuim cu:

<h2>Edit Product</h2>

Deschideți aplicația voastră cu studenții. Creați fișierul EditStudentForm.jsx prin analogie cu NewStudentForm.jsx. Aduceți în el modificări, așa cum este arătat în lecție.