Forma për Redaktimin e të Dhënave në Redux

Tani kemi një reducer për ndryshimin e të dhënave në store. Në këtë mësim do të krijojmë një formë, me anë të së cilës do të mund të redaktojmë të dhënat e produktit.

Le të hapim aplikacionin tonë të produkteve dhe të krijojmë në dosjen products skedarin EditProductForm.jsx. Krijimi i komponentit EditProductForm do të jetë i ngjashëm me NewProductForm, përveç disa ndryshimeve, në të cilat do të ndalemi. Prandaj kopjoni plotësisht kodin NewProductForm.jsx dhe ngjiseni në skedarin e krijuar EditProductForm.jsx. Tani le të fillojmë me radhë.

Hiqni nga importi nanoid, këtu nuk na duhet të gjenerojmë id. Zëvendësoni importin productAdded me productUpdated, sepse këtu do të përdorim action për përditësim, dhe jo për shtim të produktit.

Më pas do të ndryshojmë emrin e funksionit tonë të komponentit nga NewProductForm në EditProductForm.

Para se të vendosim state-t lokale në funksionin EditProductForm për name, desc, price dhe amount, le të fusim disa rreshta të tjerë kodi. Siç e përmendëm më herët, këtu nuk na duhet të gjenerojmë id. Tani detyrë jonë është ta marrim atë nga të dhënat e produktit që do të ndryshohet. Këtë e kemi bërë tashmë kur krijuam faqen e veçantë për produktin. Pra, le të marrim id duke përdorur hook-un useParams, e më pas do të gjejmë produktin që na duhet, duke përdorur hook-un useSelector (mos harroni të importoni të dy hook-ët në fillim të skedarit):

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

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

Pas kësaj do të ndryshojmë bllokun me deklarimin e state-ve lokale. Tani na duhet që si vlerë fillestare t'u caktojmë atyre të dhënat e marra nga store i produktit. Kështu do të duket state-i i parë, ndryshoni tre të tjerët vetë:

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

Pas caktimit të ndryshores për useDispatch le të fusim një rresht tjetër kodi këtë herë për hook-un useNavigate. Do e përdorim atë për t'u kthyer në faqen e produktit, kur përdorusi ruaj ndryshimet e bëra në formë:

const navigate = useNavigate()

Gjithashtu importojeni këtë hook në fillim të skedarit:

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

Më pas kemi përpunuesit për fushat e inputit. Dhe pas tyre na duhet të rregullojmë funksionin onSaveProductClick. Tani në të me klikim do të dërgojmë action productUpdated me id e marrë dhe të dhënat e ndryshuara në formë objekti. Pas kësaj do të shtojmë navigate tonë, për kalim në faqen e produktit të ndryshuar:

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

Mbetet vetëm që në return të gjejmë rreshtin:

<h2>Add a New Product</h2>

Dhe ta zëvendësojmë me:

<h2>Edit Product</h2>

Hapni aplikacionin tuaj me studentët. Krijoni skedarin EditStudentForm.jsx sipas analogjisë me NewStudentForm.jsx. Bëni në të ndryshimet, siç tregohet në mësim.