Reduxда маълумотларни таҳрирлаш учун форма

Энди бизда storeda маълумотларни ўзгартириш учун редьюсер мавжуд. Бу дарсда биз маҳсулот маълумотларини таҳрирлаш имконини берадиган форма яратамиз.

Келинг, маҳсулотлар иловасини ochамиз ва products папкасида EditProductForm.jsx файлини яратамиз. EditProductForm компонентини яратиш NewProductForm га ўхшаш бўлади, лекин биз турли хил фарқларга тўхталамиз. Шу сабабли NewProductForm.jsx кодни тўлиқ кўчириб олинг ва яратилган EditProductForm.jsx файлига joylang. Энди бошлаймиз.

Импортдан nanoid ни олиб ташланг, бу ерда бизга id яратиш шарт эмас. productAdded импортини productUpdated га алмаштиринг, чунки бу ерда биз қўшиш эмас, балки маҳсулотни янгилаш учун action дан фойдаланамиз.

Кейин бизнинг компонент функцияси номини NewProductForm дан EditProductForm га ўзгартирамиз.

EditProductForm функциясида name, desc, price ва amount учун локал стейтларни қўшмасдан олдин, янги бир неча қator код қўшамиз. Аввал айтиб ўтганимиздек, бу ерда бизга id яратиш шарт эмас. Энди вазифамиз уни ўзгартирилаётган маҳсулот маълумотларидан олиш. Биз буни маҳсуот учун алохида саҳифа яратишда қилганмиз. Шунинг учун, useParams хуки орқали id ни оламиз, сўнгра useSelector хукидан фойдаланиб керакли маҳсулотни топамиз (файл бошланишида иккала хукни хам импорт қилишни унутмангиз):

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

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

Шундан сўнг локал стейтларни эълон қилиш блокини ўзгартирамиз. Энди бизга бошланғич қиймат сифатида storedan олинган маҳсулот маълумотларини бериш керак. Биринчи стейт шу кўринишда бўлади, қолган учтасини ўзгартиринг:

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

useDispatch учун ўзгарuvчини тайинлагандан сўнг useNavigate хуки учун яна бир қator код қўшамиз. Биз уни фойдаланувчи формада киритган ўзгартиришларни сақлаганда маҳсулот саҳифасига қайтиш учун ишлатамиз:

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}`);
	}
}

Фақат бизнинг қайтарилadigan версткада шу қatorни топиш керак:

<h2>Add a New Product</h2>

Ва уни шуга алмаштиринг:

<h2>Edit Product</h2>

Студентлар билан иловангизни ochинг. EditStudentForm.jsx файлини яратинг NewStudentForm.jsx га ўхшаб. Унга дарсда кўрсатилганидек ўзгартиришлар киритинг.