Form för redigering av data i Redux

Nu har vi en reducer för att ändra data i store. I den här lektionen skapar vi ett formulär som vi kan använda för att redigera produktdata.

Låt oss öppna vår produktapplikation och skapa filen EditProductForm.jsx i mappen products. Att skapa komponenten EditProductForm kommer att vara liknande NewProductForm, med undantag för vissa skillnader som vi kommer att uppehålla oss vid. Därför kopierar du hela koden från NewProductForm.jsx och klistrar in den i den skapade filen EditProductForm.jsx. Nu börjar vi i ordning.

Ta bort importen av nanoid, här behöver vi inte generera id. Ersätt importen av productAdded med productUpdated, eftersom här kommer vi att använda action för uppdatering, inte för att lägga till en produkt.

Ändra sedan namnet på vår komponentfunktion från NewProductForm till EditProductForm.

Innan vi skapar de lokala state-variablerna i funktionen EditProductForm för name, desc, price och amount, låt oss lägga till några fler rader kod. Som vi nämnde tidigare, behöver vi inte generera id här. Nu är vår uppgift att få det från data för den produkt som ska ändras. Vi har redan gjort så när vi skapade en separat sida för produkten. Så, vi hämtar id med hjälp av hooken useParams, och sedan hittar vi den produkt vi behöver, genom att använda hooken useSelector (glöm inte att importera båda hookarna i början av filen):

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

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

Efter detta ändrar vi blocket med deklarationen av lokala state. Nu behöver vi sätta de data från store som vi hämtade för produkten som initialt värde. Så här kommer det första state se ut, ändra de tre återstående själv:

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

Efter att ha tilldelat variabeln för useDispatch låt oss lägga till ytterligare en rad kod den här gången för hooken useNavigate. Vi kommer att använda den för att återvända till sidan med produkten när användaren sparar de ändringar som gjorts i formuläret:

const navigate = useNavigate()

Importera också denna hook i början av filen:

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

Därefter har vi hanterarna för inmatningsfälten. Och efter dem behöver vi justera funktionen onSaveProductClick. Nu kommer vi när vi klickar att skicka actionen productUpdated med det hämtade id och de ändrade datan som ett objekt. Efter det lägger vi till vår navigate, för att gå till sidan för den ändrade produkten:

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

Det som återstår är att i vår returnerade JSX hitta raden:

<h2>Add a New Product</h2>

Och ersätta den med:

<h2>Edit Product</h2>

Öppna din applikation med studenter. Skapa filen EditStudentForm.jsx på samma sätt som NewStudentForm.jsx. Gör ändringar i den, som visas i lektionen.