Forma duomenų redagavimui Redux

Dabar mes turime reducerį, skirtą duomenų pakeitimui store. Šioje pamokoje sukursime formą, kurios pagalba galėsime redaguoti produkto duomenis.

Atidarykime mūsų produktų aplikaciją ir sukurkime aplanke products failą EditProductForm.jsx. Komponento EditProductForm kūrimas bus analogiškas NewProductForm, išskyrus kai kuriuos skirtumus, kuriuos pabrėšime. Todėl nukopijuokite visą NewProductForm.jsx kodą ir įklijuokite jį į sukurtą failą EditProductForm.jsx. Dabar pradėkime nuosekliai.

Pašalinkite iš importo nanoid, čiau mums nereikia generuoti id. Pakeiskite importą productAdded į productUpdated, nes čia mes naudosime action atnaujinimui, o ne produkto pridėjimui.

Toliau pakeisime mūsų komponento funkcijos pavadinimą iš NewProductForm į EditProductForm.

Prieš įvedant lokalias būsenas funkcijoje EditProductForm name, desc, price ir amount, įdėkime dar kelias kodo eilutes. Kaip jau minėjome anksčiau, čiau mums nereikia generuoti id. Dabar mūsų užduotis yra gauti jį iš keičiamo produkto duomenų. Mes tai jau darėme kuriant atskirą produkto puslapį. Taigi, gausime id naudodami hook'ą useParams, ir tada rasime mums reikalingą produktą, naudodami hook'ą useSelector (nepamirškite importuoti abiejų hook'ų failo pradžioje):

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

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

Po to pakeisime bloką su lokalios būsenos deklaravimu. Dabar mums reikia kaip pradinę reikšmę nustatyti iš store gautus produkto duomenis. Štai kaip atrodys pirmoji būsena, perdarykite tris likusias patys:

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

Po kintamojo priskyrimo useDispatch įdėkime dar vieną kodo eilutę šį kartą hook'ui useNavigate. Mes jį naudosime grįžimui į produkto puslapį, kai vartotojas išsaugos forme atliktus pakeitimus:

const navigate = useNavigate()

Taip pat importuokime šį hook'ą failo pradžioje:

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

Toliau mes turime tvarkytuvus įvesties laukams. Po jų mums reikia pataisyti funkciją onSaveProductClick. Dabar joje paspaudę siųsime action'ą productUpdated su gautu id ir pakeistais duomenimis objekto pavidalu. Po to pridėsime mūsų navigate, kad pereitume į pakeisto produkto puslapį:

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

Beliko tik mūsų grąžinamoje vertiske rasti eilutę:

<h2>Add a New Product</h2>

Ir pakeisti ją į:

<h2>Edit Product</h2>

Atidarykite savo studentų aplikaciją. Sukurkite failą EditStudentForm.jsx pagal analogiją su NewStudentForm.jsx. Įdėkite jį pakeitimus, kaip parodyta pamokoje.