Redux-da maglumatlary redaktirilemek üçin forma

Indi bizde store-daky maglumatlary üýtgetmek üçin reducer bar. Bu sapakda biz önüm maglumatlaryny redaktirilip biljek forma dörederis.

Geliň önümler bilen programmaçylyk önümimizi açalyň we products papkasynda EditProductForm.jsx faýlyny dörediň. EditProductForm komponentini döretmek NewProductForm-a meňzeş bolar, ýöne käbir tapawutlary bar, olaryň üstünde durarys. Şonuň üçin NewProductForm.jsx faýlynyň kodyny tutuşlygyna göçürip döredilen EditProductForm.jsx faýlyna goýuň. Indi tertip boýunça başlalyň.

Importdan nanoid-i aýyryň, bu ýerde bizä id döretmek zerur däl. Importdaky productAdded-i productUpdated bilen çalyşyň, sebäbi bu ýerde biz goşmak üçin däl, eýsem önümi täzelemek üçin action ulanarys.

Indiki ädimde, komponentimiziň funksiýasynyň adyň NewProductForm-dan EditProductForm-a üýtgediň.

EditProductForm funksiýasynda name, desc, price we amount üçin lokal ýagdaýlary (state) düzmezden ozal, geliň birnäçe setir kod goşalyň. Öň aýdşyň ýaly, bu ýerde bizä id döretmek zerur däl. Indi biziň wezipesiňiz üýtgedilýän önümiň maglumatlaryndan ony almak. Biz muny öňem önüm üçin aýratyn sahypa döredilende edipdik. Şeýlelik bilen, useParams garmasyň kömegi bilen id-ni alyň, soňra bolsa gerekli önümi useSelector garmasyny ulanyp tapyň (faýlyň başynda her iki garmany import etmegi ýatdan çykarmaň):

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

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

Şondan soň, lokal ýagdaýlary (state) yglan edýän blok üýtgediň. Indi biz olara başlangyç baha hökmünde store-dan alynýan önüm maglumatlaryny bellämeli. Ilkinji ýagdaý (state) şeýle görüner, galan üçüsini özüňiz üýtgediň:

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

useDispatch üçin üýtgeýjini bellänimizden soň useNavigate garmasy üçin ýene bir setir kod goşalyň. Ulanyjy formada girizen üýtgeşmelerini saklanda, önüm sahypasyna yzyna gaýtaryp gelmek üçin ony ulanarys:

const navigate = useNavigate()

Şeýle hem bu garmany faýlyň başynda import ediň:

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

Indiki ädimde girizme meýdanlary üçin işleýjiler (handler) bar. Olar soňra biz onSaveProductClick funksiýasyny düzetmeli. Indi oňa basylanda biz alynýan id bilen we üýtgedilen maglumatlar obyekti görnüşinde productUpdated ekşinini ibereris. Soňra bolsa üýtgedilen önüm sahypasyna geçmek üçin navigate goşarys:

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

Geri gaýtarylýan sahypa gurluşynda (JSX) şu setiri tapmak galdy:

<h2>Add a New Product</h2>

We ony şu bilen çalyşyň:

<h2>Edit Product</h2>

Talyp programmanyzy açyň. NewStudentForm.jsx-a meňzeş EditStudentForm.jsx faýlyny dörediň. Onda sapakda görkezilişi ýaly üýtgeşmeleri giriziň.