Redux-də Məlumatları Redaktə Etmə Forması

İndi bizim store-dakı məlumatları dəyişmək üçün reducer-ımız var. Bu dərsdə biz məhsul məlumatlarını redaktə edə biləcəyimiz bir forma yaradacağıq.

Gəlin məhsul tətbiqimizi açıq və products qovluğunda EditProductForm.jsx faylını yaradaq. EditProductForm komponentinin yaradılması, üzərində dayanacağımız bəzi fərqlər xaricində, NewProductForm-a bənzəyəcək. Buna görə də, NewProductForm.jsx-dakı kodu tam kopyalayın və yaradılmış EditProductForm.jsx faylına yapışdırın. İndi sıra ilə başlayaq.

Importdan nanoid-i çıxarın, burada bizə id yaratmaq lazım deyil. productAdded importunu productUpdated ilə əvəz edin, çünki burada biz əlavə etmək əvəzinə yeniləmə action-undan istifadə edəcəyik.

Sonra, komponent funksiyamızın adını NewProductForm-dan EditProductForm-a dəyişək.

EditProductForm funksiyasında name, desc, price və amount üçün lokal state-ləri təyin etməzdən əvvəl, gəlin bir neçə sətir kod daha əlavə edək. Daha əvvəl də qeyd etdiyimiz kimi, burada bizim id yaratmaya ehtiyacımız yoxdur. İndi vəzifəmiz onu dəyişdiriləcək məhsulun məlumatlarından əldə etməkdir. Biz bunu əvvəl məhsulun ayrıca səhifəsini yaradarkən də etmişik. Beləliklə, useParams hook-u vasitəsilə id-ni əldə edək, və sonra useSelector hook-undan istifadə edərək (faylın əvvəlində hər iki hook-u import etməyi unutmayın) lazımi məhsulu tapaq:

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

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

Bundan sonra lokal state elanları olan bloku dəyişək. İndi bizə onlara başlanğıc dəyər olaraq store-dan əldə edilmiş məhsul məlumatlarını təyin etmək lazımdır. Birinci state belə görünəcək, qalan üçünü özünüz dəyişdirin:

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

useDispatch üçün dəyişən təyin edildikdən sonra gəlin bu dəfə useNavigate hook-u üçün daha bir sətir kod əlavə edək. Biz onu istifadəçi formada edilmiş dəyişiklikləri yadda saxladıqda məhsulun səhifəsinə qayıtmaq üçün istifadə edəcəyik:

const navigate = useNavigate()

Həmçinin bu hook-u faylın əvvəlində import edək:

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

Sonra bizdə daxil etmə sahələri üçün işləyicilər gəlir. Və onlardan sonra biz onSaveProductClick funksiyasını düzəltməliyik. İndi ora kliklədikdə biz əldə edilmiş id və dəyişdirilmiş məlumatları obyekt şəklində göndərərək productUpdated action-unu dispatch edəcəyik. Sonra dəyişdirilmiş məhsulun səhifəsinə keçid üçün navigate əlavə edəcəyik:

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

Yalnız qaytarılan qaydada olan aşağıdakı sətri tapmaq qalır:

<h2>Add a New Product</h2>

Və onu bununla əvəz edin:

<h2>Edit Product</h2>

Tələbə tətbiqinizi açın. EditStudentForm.jsx faylını NewStudentForm.jsx-a bənzətməklə yaradın. Dərsdə göstərildiyi kimi ona dəyişikliklər edin.