Formulář pro úpravu dat v Redux

Nyní máme reduktor pro změnu dat v store. V této lekci vytvoříme formulář, pomocí kterého budeme moci upravovat data produktu.

Otevřeme naši aplikaci s produkty a vytvořme ve složce products soubor EditProductForm.jsx. Vytvoření komponentu EditProductForm bude analogické k NewProductForm, s výjimkou některých rozdílů, na kterých se budeme zastavovat. Proto zkopírujte celý kód NewProductForm.jsx a vložte jej do vytvořeného souboru EditProductForm.jsx. Nyní začneme popořadě.

Odstraňte z importu nanoid, zde nám není potřeba generovat id. Nahraďte import productAdded na productUpdated, protože zde budeme používat akci pro aktualizaci, a ne pro přidání produktu.

Dále změníme název funkce našeho komponentu z NewProductForm na EditProductForm.

Než zavedeme lokální stavy ve funkci EditProductForm pro name, desc, price a amount, vložme ještě několik řádků kódu. Jak jsme již zmínili dříve, zde nám není potřeba generovat id. Nyní naším úkolem je získat jej z dat upravovaného produktu. Už jsme to dělali při vytváření samostatné stránky pro produkt. Takže, získáme id pomocí hooku useParams, a pak najdeme potřebný produkt, pomocí hooku useSelector (nezapomeňte importovat oba hooky na začátku souboru):

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

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

Poté změníme blok s deklarací lokálních stavů. Nyní potřebujeme jako počáteční hodnotu nastavit získaná data produktu ze store. Takto bude vypadat první stav, tři zbývající upravte sami:

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

Po přiřazení proměnné pro useDispatch vložme ještě jeden řádek kódu tentokrát pro hook useNavigate. Budeme jej používat pro návrat na stránku s produktem, když uživatel uloží provedené změny ve formuláři:

const navigate = useNavigate()

Taky importujte tento hook na začátku souboru:

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

Dále máme obsluhy pro vstupní pole. A po nich je nutné upravit funkci onSaveProductClick. Nyní v ní při kliknutí budeme odesílat akci productUpdated se získaným id a změněnými daty ve formě objektu. Poté přidáme náš navigate, pro přechod na stránku upraveného produktu:

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

Zbývá pouze v naší vracené versti najít řádek:

<h2>Add a New Product</h2>

A nahradit jej na:

<h2>Edit Product</h2>

Otevřete vaši aplikaci se studenty. Vytvořte soubor EditStudentForm.jsx analogicky k NewStudentForm.jsx. Proveďte v něm změny, jak je ukázáno v lekci.