Obrazec za urejanje podatkov v Reduxu

Sedaj imamo reducer za spreminjanje podatkov v store. V tej lekciji bomo ustvarili obrazec, s katerim bomo lahko uredili podatke izdelka.

Odprimo našo aplikacijo z izdelki in ustvarimo v mapi products datoteko EditProductForm.jsx. Ustvarjanje komponente EditProductForm bo podobno NewProductForm, z izjemo nekaterih razlik, na katerih se bomo ustavili. Zato v celoti kopirajte kodo NewProductForm.jsx in jo prilepite v ustvarjeno datoteko EditProductForm.jsx. Zdaj pa začnimo po vrsti.

Odstranite iz uvoza nanoid, tukaj ga ne potrebujemo generirati. Zamenjajte uvoz productAdded z productUpdated, saj tukaj bomo uporabili action za posodobitev in ne za dodajanje izdelka.

Nato spremenimo ime naše funkcije komponente iz NewProductForm v EditProductForm.

Preden bomo vzpostavili lokalna stanja v funkciji EditProductForm za name, desc, price in amount, vstavimo še nekaj vrstic kode. Kot smo že omenili prej, tukaj nam ni treba generirati id. Zdaj je naša naloga, da ga pridobimo iz podatkov izdelka, ki ga urejamo. To smo že naredili pri ustvarjanju ločene strani za izdelek. Torej, pridobimo id s pomočjo huka useParams, nato pa poiščemo želeni izdelek, z uporabo huka useSelector (ne pozabite uvoziti obeh hukov na začetku datoteke):

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

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

Po tem spremenimo blok z deklaracijo lokalnih stanj. Zdaj moramo kot začetno vrednost nastaviti podatke izdelka, pridobljene iz store. Tako bo izgledalo prvo stanje, preostale tri spremenite sami:

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

Po dodelitvi spremenljivke za useDispatch dodajmo še eno vrstico kode za tokrat za huk useNavigate. Uporabili ga bomo za vrnitev na stran z izdelkom, ko bo uporabnik shranil spremembe, vnesene v obrazcu:

const navigate = useNavigate()

Prav tako uvozimo ta huk na začetku datoteke:

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

Nato sledijo obdelovalniki za polja za vnos. In za njimi moramo popraviti funkcijo onSaveProductClick. Zdaj bomo ob kliku vanjo poslali akcijo productUpdated z pridobljenim id-jem in spremenjenimi podatki v obliki objekta. Nato bomo dodali naš navigate, za prehod na stranico spremenjenega izdelka:

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

Ostalo je le še, da v naši vrnjeni versti poiščemo vrstico:

<h2>Add a New Product</h2>

In jo zamenjajte z:

<h2>Edit Product</h2>

Odprite vašo aplikacijo s študenti. Ustvarite datoteko EditStudentForm.jsx po analogiji z NewStudentForm.jsx. Vnesite vanjo spremembe, kot je prikazano v lekciji.