Fomu ya Kuhariri Data katika Redux

Sasa tuna reducer ya kubadilisha data kwenye duka. Katika somo hili tutaunda fomu ambayo kwa kutumia hiyo tutaweza kuhariri data za bidhaa.

Wacha tufungue programu yetu ya bidhaa na kuunda kwenye folda products faili EditProductForm.jsx. Kuunda komponeneti EditProductForm itakuwa sawa na NewProductForm, isipokuwa kwa baadhi ya tofauti, ambazo tutakikisia. Kwa hiyo nakili kabisa kodi ya NewProductForm.jsx na ui paste kwenye faili iliyoundwa EditProductForm.jsx. Sasa tuanze kwa mpangilio.

Ondoa kwenye import nanoid, hapa hatuhitaji kutengeneza id. Badilisha import productAdded kuwa productUpdated, kwani hapa tutatumia action ya kusasisha, na siyo ya kuongeza bidhaa.

Ifuatayo badilisha jina la funkšeni yetu ya komponeneti kutoka NewProductForm kuwa EditProductForm.

Kabla ya kuanzisha state za ndani kwenye funkšeni EditProductForm kwa name, desc, price na amount, wacha tuweke mstari mmoja zaidi wa kodi. Kama tulivyotaja hapo awali, hapa hatuhitaji kutengeneza id. Sasa kazi yetu ni kuipata kutoka kwenye data za bidhaa inayobadilishwa. Tumefanya kama hivi wakati wa kuunda ukurasa maalum kwa bidhaa. Kwa hiyo, tutaipata id kwa kutumia hook useParams, kisha tutapata bidhaa tunayohitaji, kwa kutumia hook useSelector (usisahau kuimport hook zote mbili mwanzoni mwa faili):

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

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

Baada ya haya badilisha block ya kutangaza state za ndani. Sasa tunahitaji kuweka kama thamani ya kwanza data za bidhaa zilizopatikana kwenye duka. Hivi itakuwa mwonekano wa state ya kwanza, badilisha zile tatu zilizobaki wenyewe:

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

Baada ya kugawa variable kwa useDispatch wacha tuongeze mstari mmoja zaidi wa kodi kwa kiasi hiki kwa hook useNavigate. Tutatumia hii kurudi kwenye ukurasa wa bidhaa, wakati mtumiaji atakapohifadhi mabadiliko yaliyowekwa kwenye fomu:

const navigate = useNavigate()

Pia import hook hii mwanzoni mwa faili:

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

Ifuatayo tuna vihandisi vya sehemu za kuingiza data. Na baada yao tunahitaji kurekebisha funkšeni onSaveProductClick. Sasa humo kwa kubofya tutatuma ekšeni productUpdated na id iliyopatikana na data iliyobadilishwa kwa mfumo wa kitu. Baada ya hapo tutaongeza navigate yetu, kwa mpito kwenye ukurasa wa bidhaa iliyobadilishwa:

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

Imebaki tu kwenye kurudi kwetu na markup kupata mstari:

<h2>Add a New Product</h2>

Na kuibadilisha kuwa:

<h2>Edit Product</h2>

Fungua programu yako ya wanafunzi. Unda faili EditStudentForm.jsx kwa mfano wa NewStudentForm.jsx. Weka humo mabadiliko, kama yalivyoonyeshwa kwenye somo.