Formularz edycji danych w Redux

Teraz mamy reducer do zmiany danych w store. Na tej lekcji stworzymy formularz, za pomocą którego będziemy mogli edytować dane produktu.

Otwórzmy naszą aplikację z produktami i stwórzmy w folderze products plik EditProductForm.jsx. Tworzenie komponentu EditProductForm będzie analogiczne do NewProductForm, z wyjątkiem niektórych różnic, na których się zatrzymamy. Dlatego skopiuj cały kod NewProductForm.jsx i wklej go do utworzonego pliku EditProductForm.jsx. Teraz zaczniemy po kolei.

Usuń z importu nanoid, tutaj nie potrzebujemy generować id. Zamień import productAdded na productUpdated, ponieważ tutaj będziemy używać action do aktualizacji, a nie do dodawania produktu.

Następnie zmienimy nazwę funkcji naszego komponentu z NewProductForm na EditProductForm.

Zanim utworzymy lokalne stany w funkcji EditProductForm dla name, desc, price i amount, wstawmy jeszcze kilka linijek kodu. Jak wspomnieliśmy wcześniej, tutaj nie potrzebujemy generować id. Teraz naszym zadaniem jest uzyskanie go z danych edytowanego produktu. Robiliśmy to już podczas tworzenia osobnej strony dla produktu. A zatem, uzyskajmy id za pomocą hooka useParams, a następnie znajdźmy potrzebny nam produkt, używając hooka useSelector (nie zapomnij zaimportować obu hooków na początku pliku):

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

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

Następnie zmieńmy blok z deklaracją lokalnych stanów. Teraz musimy jako wartość początkową ustawić im dane produktu uzyskane ze store. Tak będzie wyglądać pierwszy stan, przerób trzy pozostałe samodzielnie:

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

Po przypisaniu zmiennej dla useDispatch dodajmy jeszcze jedną linię kodu tym razem dla hooka useNavigate. Będziemy go używać do powrotu na stronę z produktem, gdy użytkownik zapisze wprowadzone w formularzu zmiany:

const navigate = useNavigate()

Również zaimportuj ten hook na początku pliku:

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

Następnie mamy handlery dla pól wprowadzania. A po nich musimy poprawić funkcję onSaveProductClick. Teraz w niej po kliknięciu będziemy wysyłać akcję productUpdated z uzyskanym id i zmienionymi danymi w postaci obiektu. Potem dodamy nasz navigate, do przejścia na stronę zmienionego produktu:

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

Pozostało tylko w naszej zwracanej strukturze znaleźć linijkę:

<h2>Add a New Product</h2>

I zamienić ją na:

<h2>Edit Product</h2>

Otwórz twoją aplikację ze studentami. Utwórz plik EditStudentForm.jsx analogicznie do NewStudentForm.jsx. Wprowadź do niego zmiany, jak pokazano w lekcji.