Datu rediģēšanas forma Redux

Tagad mums ir reducers, lai mainītu datus store. Šajā nodarbībā mēs izveidosim formu, ar kuras palīdzību mēs varēsim rediģēt produkta datus.

Atveram savu produktu lietotni un izveidosim mapē products failu EditProductForm.jsx. Komponenta EditProductForm izveide būs līdzīga NewProductForm, izņemot dažas atšķirības, uz kurām mēs pakavēsimies. Tāpēc nokopējiet visu NewProductForm.jsx kodu un ielīmējiet to izveidotajā failā EditProductForm.jsx. Tagad sāksim secīgi.

Noņemiet no importa nanoid, šeit mums nav jāģenerē id. Aizstājiet importu productAdded ar productUpdated, jo šeit mēs izmantosim action atjaunināšanai, nevis pievienošanai produktam.

Tālāk mainīsim mūsu komponenta funkcijas nosaukumu no NewProductForm uz EditProductForm.

Pirms mēs izveidosim lokālos state funkcijā EditProductForm priekš name, desc, price un amount, ievietosim vēl dažas koda rindiņas. Kā jau minējām iepriekš, šeit mums nav jāģenerē id. Tagad mūsu uzdevums ir to iegūt no maināmā produkta datiem. Mēs jau esam tā darījuši, veidojot atsevišķu lapu produktam. Tātad, iegūstam id, izmantojot hook useParams, un pēc tam atradīsim vajadzīgo produktu, izmantojot hook useSelector (neaizmirstiet importēt abus hook faila sākumā):

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

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

Pēc tam mainīsim bloku ar lokālo state deklarēšanu. Tagad mums kā sākotnējās vērtības ir jāiestata no store iegūtie produkta dati. Lūk, kā izskatīsies pirmais state, pārveidojiet atlikušos trīs paši:

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

Pēc mainīgā piešķiršanas priekš useDispatch ievietosim vēl vienu koda rindiņu šoreiz priekš hook useNavigate. Mēs to izmantosim, lai atgrieztos lapā ar produktu, kad lietotājs saglabās veidnē veiktās izmaiņas:

const navigate = useNavigate()

Arī importējiet šo hook faila sākumā:

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

Tālāk mums ir apstrādātāji priekš ievades laukiem. Un pēc tiem mums nepieciešams labot funkciju onSaveProductClick. Tagad tajā, kad noklikšķinās, mēs sūtīsim action productUpdated ar iegūto id un mainītajiem datiem objekta veidā. Pēc tam pievienosim mūsu navigate, lai pārietu uz mainītā produkta lapu:

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

Atliek tikai mūsu atgriezeniskajā verstē atrast rindiņu:

<h2>Add a New Product</h2>

Un aizstāt to ar:

<h2>Edit Product</h2>

Atveriet savu studentu lietotni. Izveidojiet failu EditStudentForm.jsx pēc analoģijas ar NewStudentForm.jsx. Ievadiet tajā izmaiņas, kā parādīts nodarbībā.