Vorm vir die Redigering van Data in Redux

Nou het ons 'n reducer om data in die store te verander. In hierdie les sal ons 'n vorm skep waardeur ons produkdata kan redigeer.

Kom ons maak ons produkaansoeking oop en skep die lêer EditProductForm.jsx in die gids products. Die skep van die komponent EditProductForm sal soortgelyk wees aan NewProductForm, met die uitsondering van 'n paar verskille waarop ons sal fokus. Daarom, kopieer die volledige kode van NewProductForm.jsx en plak dit in die geskepte lêer EditProductForm.jsx. Laat ons nou begin.

Verwyder die invoer van nanoid, hier het ons nie die id nodig om te genereer nie. Vervang die invoer van productAdded met productUpdated, want hier sal ons die aksie gebruik vir opdatering, nie vir byvoeging van 'n produk nie.

Verder verander ons die naam van ons funksie komponent van NewProductForm na EditProductForm.

Voordat ons plaaslike state in die funksie EditProductForm skep vir name, desc, price en amount, laat ons nog 'n paar reëls kode invoeg. Soos ons vroeër genoem het, hier het ons nie die id nodig om te genereer nie. Nou is ons taak om dit uit die data van die produk wat verander moet word te kry. Ons het dit reeds gedoen toe ons die aparte bladsy vir die produk geskep het. Dus, kry die id deur die haak useParams te gebruik, en vind dan die produk wat ons nodig het, deur die haak useSelector te gebruik (moenie beide hakke aan die begin van die lêer invoer nie):

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

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

Daarna verander ons die blok met die verklaring van plaaslike state. Nou moet ons as aanvanklike waarde die data van die produk wat uit die store verkry is, instel. Hier is hoe die eerste state sal lyk, verander die drie oorblywende self:

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

Nadat ons die veranderlike vir useDispatch toegeken het, laat ons nog 'n reël kode byvoeg, hierdie keer vir die haak useNavigate. Ons sal dit gebruik om terug te keer na die bladsy met die produk wanneer die gebruiker die veranderinge in die vorm stoor:

const navigate = useNavigate()

Voer ook hierdie haak aan die begin van die lêer in:

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

Dan het ons die hanterders vir die invoervelde. En daarna moet ons die funksie onSaveProductClick aanpas. Nou sal ons daarin met 'n klik die aksie productUpdated stuur met die verkry id en veranderde data in die vorm van 'n objek. Daarna voeg ons ons navigate by, om oor te gaan na die bladsy van die veranderde produk:

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

Nou moet ons net in ons terugkerende opmaak die reël vind:

<h2>Add a New Product</h2>

En dit vervang met:

<h2>Edit Product</h2>

Maak jou aansoeking met studente oop. Skep die lêer EditStudentForm.jsx op soortgelyke wyse as NewStudentForm.jsx. Voer die veranderinge daarin in, soos in die les gewys.