Reduxте маалыматтарды оңдоо формасы

Эми биздин storeдогу маалыматтарды өзгөртүү үчүн редьюсерибиз бар. Бул сабакта биз продукттун маалыматтарын оңдой ала турган форма түзөбүз.

Келгиле, продуктулар колдонмобузду ачып, products папкасында EditProductForm.jsx файлын түзөлү. EditProductForm компоненттин түзүү NewProductForm окшош болот, бирок айрым айырмачылыктары бар, аларга токтолобуз. Ошондуктан NewProductForm.jsx файлынын кодун толугу менен көчүрүп, түзүлгөн файлга EditProductForm.jsx салыңыз. Эми ирет менен баштайлы.

Импорттон nanoidди алып салыңыз, бул жерде бизге id генерациялоо керек эмес. Импорттогу productAddedты productUpdated менен алмаштырыңыз, анткени бул жерде биз кошуу үчүн эмес, жаңыртуу үчүн action колдонобуз.

Андан кийин биздин компоненттин функциясынын аталышын NewProductFormтен EditProductFormке өзгөртөбүз.

EditProductForm функциясында name, desc, price жана amount үчүн локальдик стейттерди кошордон мурун, дагы бир нече сап код кошолу. Жогоруда айткандай, бул жерде бизге id генерациялоо керек эмес. Эми биздин милдет өзгөртүлүүчү продукттун маалыматынан аны алуу. Биз мурун продукт үчүн жеке баракча түзгөндө муну жасаганбыз. Ошентип, useParams хукунун жардамы менен id алабыз, андан кийин керектүү продуктту табабыз, 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 функциясын оңдоп чыгуу керек. Эми анда чыкылдатуу менен биз алынган id жана өзгөртүлгөн маалыматтарды объект түрүндө кошо алып, productUpdated экшенин жөнөтөбүз. Андан кийин navigateти кошобуз, өзгөртүлгөн продукттун баракчасына өтүү үчүн:

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

Кайтарылуучу версткабызда мындай сапты тапканга гана калды:

<h2>Add a New Product</h2>

Жана аны мына менен алмаштырыңыз:

<h2>Edit Product</h2>

Студенттер менен колдонмоңузду ачыңыз. EditStudentForm.jsx файлын NewStudentForm.jsx окшоп түзүңүз. Ага сабакта көрсөтүлгөндөй өзгөртүүлөрдү киргизиңиз.