Форма барои таҳрир кардани додаҳо дар Redux

Акнун мо редюсер барои тағйир додани додаҳо дар store дорем. Дар ин дарс мо шакле месозем, ки тавассути он метавонем додаҳои маҳсулотро таҳрир кунем.

Биёед барномаи моро бо маҳсулот кушода ва дар пӯшаи products файли EditProductForm.jsx эҷод кунем. Эҷоди компоненти EditProductForm ба NewProductForm монанд хоҳад буд, ба истиснои баъзе фарқҳо, ки мо бар онҳо ист мешавем. Аз ин рӯ тамоми рамзи NewProductForm.jsx-ро нусхабардорӣ кунед ва онро дар файли эҷодшудаи EditProductForm.jsx гузоред. Акнун бо тартиб оғоз кунем.

Аз воридот nanoid-ро тоза кунед, дар ин ҷо ба мо эҷоди id лозим нест. Воридоти productAdded-ро ба productUpdated иваз кунед, зеро дар ин ҷо мо action-ро барои навсозӣ истифода мебарем, на барои илова кардани маҳсулот.

Баъд номи функсияи компоненти моро аз NewProductForm ба EditProductForm иваз мекунем.

Пеш аз он ки мо стейтҳои локалиро дар функсияи EditProductForm барои name, desc, price ва amount муайян кунем, биёед якчанд сатри дигари рамзро илова кунем. Чунон ки мо пештар зикр кардем, дар ин ҷо ба мо эҷоди id лозим нест. Акнун вазифаи мо гирифтани он аз додаҳои маҳсулоти тағйирёбанда мебошад. Мо ин корро ҳангоми эҷоди саҳифаи ҷудогона барои маҳсулот карда будем. Пас, id-ро бо ёрии хуки useParams гирем, ва он гоҳ маҳсулоти дархостшударо пайдо кунем, бо истифодаи хуки useSelector (ҳарду хукро дар оғози файл ворид кардани онҳоро фаромӯш накунед):

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

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

Пас аз ин блоки эълонии стейтҳои локалро тағйир диҳем. Акнун ба мо дар ҳолати ибтидоӣ додаҳои гирифташуда аз store-и маҳсулотро таъин кардан лозим аст. Ин тавр якумин стейт хоҳад буд, сетои дигарро худатон тағйир диҳед:

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

Пас аз таъин кардани тағйирёбанда барои useDispatch биёед як сатри дигари рамзеро ин дафъа барои хуки useNavigate илова кунем. Мо онро барои бозгашт ба саҳифаи бо маҳсулот, вақте ки корбар тағйироти воридшуда дар шаклро захира мекунад, истифода мебарем:

const navigate = useNavigate()

Ҳамчунин ин хукро дар оғози файл ворид кунед:

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

Баъд аз мо коргарон барои майдонҳои воридот меоянд. Ва пас аз онҳо ба мо функсияи onSaveProductClick-ро дуруст кардан лозим аст. Акнун дар он ҳангоми клик мо экшени productUpdated-ро фиристодан мехоҳем бо id-и гирифташуда ва додаҳои тағйирёфта дар шакли объект. Пас navigate-и худро илова мекунем, барои гузариш ба саҳифаи маҳсулоти тағйирёфта:

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

Фақат дар верстаи баргардонидашудаи мо боқӣ монд сатрро ёбем:

<h2>Маҳсулоти Навро Илова Кунед</h2>

Ва онро ба ин иваз кунем:

<h2>Маҳсулотро Таҳрир Кунед</h2>

Барномаи худро бо донишҷӯён кушоед. Файли EditStudentForm.jsx-ро эҷод кунед ба монанди NewStudentForm.jsx. Тағйиротҳоро ба он ворид кунед, чунон ки дар дарс нишон дода шуд.