Forma za uređivanje podataka u Redux-u

Sada imamo reducer za promenu podataka u store-u. Na ovoj lekciji ćemo kreirati formu, pomoću koje ćemo moći da uređujemo podatke o proizvodu.

Otvorimo našu aplikaciju sa proizvodima i kreirajmo u folderu products fajl EditProductForm.jsx. Kreiranje komponente EditProductForm biće analogno NewProductForm, osim nekih razlika, na kojima ćemo se zadržati. Zato kopirajte celokupni kod NewProductForm.jsx i nalepite ga u kreirani fajl EditProductForm.jsx. Sada ćemo krenuti redom.

Uklonite iz importa nanoid, ovde nam nije potrebno generisati id. Zamenite import productAdded sa productUpdated, pošto ovde ćemo koristiti action za ažuriranje, a ne za dodavanje proizvoda.

Zatim ćemo promeniti naziv funkcije naše komponente sa NewProductForm na EditProductForm.

Pre nego što definišemo lokalne stanje u funkciji EditProductForm za name, desc, price i amount, hajde da ubacimo još nekoliko linija koda. Kao što smo ranije pomenuli, ovde nam nije potrebno generisati id. Sada je naš zadatak da ga dobijemo iz podataka proizvoda koji se menja. Već smo to radili prilikom kreiranja zasebne stranice za proizvod. Dakle, dobijmo id pomoću huka useParams, a zatim pronađimo potrebni proizvod, koristeći huk useSelector (ne zaboravite da importujete oba huka na početku fajla):

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

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

Posle toga ćemo promeniti blok sa deklaracijom lokalnih stanja. Sada nam je potrebno da kao početnu vrednost postavimo podatke o proizvodu dobijene iz store-a. Ovako će izgledati prvo stanje, prepravite tri preostala sama:

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

Nakon dodeljivanja promenljive za useDispatch hajde da unesemo još jednu liniju koda ovog puta za huk useNavigate. Koristićemo ga za povratak na stranicu sa proizvodom, kada korisnik sačuva izmene unete u formi:

const navigate = useNavigate()

Takođe importujte ovaj huk na početku fajla:

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

Zatim idu rukovaoci (handlers) za polja unosa. A nakon njih nam je potrebno da ispravimo funkciju onSaveProductClick. Sada ćemo u njoj pri kliku slati akciju productUpdated sa dobijenim id-jem i izmenjenim podacima u vidu objekta. Zatim ćemo dodati naš navigate, za prelazak na stranicu izmenjenog proizvoda:

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

Ostalo je samo da u našoj vraćenoj verstici (JSX) nađemo liniju:

<h2>Add a New Product</h2>

I zamenimo je sa:

<h2>Edit Product</h2>

Otvorite vašu aplikaciju sa studentima. Kreirajte fajl EditStudentForm.jsx po analogiji sa NewStudentForm.jsx. Unesite u njega izmene, kao što je prikazano na lekciji.