Ma'lumotlarni Reduxda tahrirlash uchun forma

Endi bizda store'dagi ma'lumotlarni o'zgartirish uchun reducer mavjud. Ushbu darsda biz mahsulot ma'lumotlarini tahrirlash imkonini beradigan formani yaratamiz.

Keling, mahsulotlar ilovamizni ochaylik va products papkasida EditProductForm.jsx faylini yarataylik. EditProductForm komponentini yaratish NewProductForm ga o'xshaydi, faqat biz to'xtatadigan ba'zi farqlar bilan. Shuning uchun NewProductForm.jsx dagi kodni to'liq nusxalang va yaratilgan EditProductForm.jsx fayliga joylashtiring. Endi tartib bilan boshlaymiz.

Importdan nanoid ni olib tashlang, bu yerda identifikator yaratish shart emas. productAdded importini productUpdated ga almashtiring, chunki bu yerda biz qo'shish uchun emas, balki yangilash uchun action dan foydalanamiz.

Keyin komponent funksiyamizning nomini NewProductForm dan EditProductForm ga o'zgartiring.

EditProductForm funksiyasida name, desc, price va amount uchun lokal statelarni aniqlashdan oldin, keling yana bir nechta kod qatorini qo'shamiz. Ilgari aytib o'tganimizdek, bu yerda identifikator yaratish shart emas. Endi bizning vazifamiz uni o'zgartirilayotgan mahsulot ma'lumotlaridan olish. Biz buni mahsulot uchun alohida sahifa yaratishda qilgan edik. Xo'sh, useParams hooki yordamida identifikatorni olamiz, so'ngra useSelector hookidan foydalanib kerakli mahsulotni topamiz (fayl boshida ikkala hookni ham import qilishni unutmang):

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

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

Shundan so'ng, lokal statelarni e'lon qilish blokini o'zgartiring. Endi biz ularga bashlang'ich qiymat sifatida storedan olingan mahsulot ma'lumotlarini belgilashimiz kerak. Birinchi state shunday ko'rinadi, qolgan uchtasini o'zingiz o'zgartiring:

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

useDispatch uchun o'zgaruvchi tayinlagandan so'ng, keling bu safar useNavigate hooki uchun yana bir kod qatorini qo'shamiz. Biz undan foydalanuvchi formada kiritgan o'zgartirishlarni saqlaganda, mahsulot sahifasiga qaytish uchun foydalanamiz:

const navigate = useNavigate()

Shuningdek, ushbu hookni fayl boshida import qiling:

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

Keyin bizda kirish maydonlari uchun handlerlar bor. Ulardan keyin onSaveProductClick funksiyasini tuzatishimiz kerak. Endi unda klik paytida biz olingan identifikator va o'zgartirilgan ma'lumotlarni ob'ekt ko'rinishida productUpdated ekheni yuboramiz. Keyin navigate ni qo'shamiz, o'zgartirilgan mahsulot sahifasiga o'tish uchun:

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

Faqat qaytariladigan verstkamizda quyidagi qatorni topish qoldi:

<h2>Add a New Product</h2>

Va uni quyidagiga almashtiring:

<h2>Edit Product</h2>

Talabalar ilovangizni oching. EditStudentForm.jsx faylini NewStudentForm.jsx ga o'xshab yarating. Unga darsda ko'rsatilgandek o'zgartirishlar kiriting.