Format dhe Shtetet Lokale në Redux

Në mësimet e mëparshme mësuam të merrnim të dhëna nga dyqani dhe t'i shfaqim ato në komponentin React. Në këtë mësim do të fillojmë të shtojmë të dhëna të reja. Këtë do ta bëjmë duke përdorur një formular, pas plotësimit të së cilës, shitësi do të mund të shtojë një produkt të ri.

Le të fillojmë duke thënë se nuk ka kuptim gjithmonë të përdoret gjendja globale e Redux. Ka raste kur për nevojat tona mund të krijojmë shtete lokale. Me shtete lokale do t'i referohemi atyre shteteve që përdoren brenda një komponenti të caktuar për nevoja teknike. Për shembull, për të fshehur ose shfaqur diçka me një buton.

Në rastin tonë, përdoruesi do të fusë të dhënat në formular dhe, natyrisht, do të na duhen shtete për këtë. Do të ishte e mundur të përdorej gjendja globale e Redux, por nuk ka kuptim, pasi shtetet tona do të punojnë vetëm në një vend të aplikacionit për formularin e shtimit të produktit. Rregulli kryesor që duhet ndjekur - shtetet lokale nuk duhet të punojnë përtej komponentit në të cilin janë krijuar, dhe në asnjë rast nuk duhet të prekin dyqanin. Një praktikë e tillë përdoret shpesh gjatë krijimit të formulareve.

Le të hapim dosjen products të aplikacionit tonë me produkte, të krijojmë një skedar NewProductForm.jsx brenda saj dhe të importojmë në të hook-un useState:

import { useState } from 'react'

Tani le të krijojmë vetë komponentin me formular dhe të përcaktojmë në të shtetet e zakonshme, ashtu siç e kemi bërë më parë në React. Na duhen shtete për të punuar me emrin, përshkrimin, çmimin dhe sasinë e produktit:

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

Më pas, le të shtojmë përpunimin standard për çdo fushë kur përdoruesi fut të dhëna:

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)

Dhe pastaj le të kthejmë në komponent shabllonin me titull dhe një formular bosh:

return (
	<div>
		<h2>Shto një Produkt të Ri</h2>
		<form>
		</form>
	</div>
)

Hapni aplikacionin tuaj me studentët. Krijoni një skedar NewStudentForm.jsx në dosjen students. Përcaktoni në komponentin NewStudentForm shtete lokale për fushat e nevojshme, shkruani për çdo fushë përpunimin, siç tregohet në mësim.

Kthejeni në komponentin NewStudentForm shabllonin që përmban titull dhe një formular bosh.