Tietojen muokkaamislomake Reduxissa

Nyt meillä on reduceri datan muuttamiseen storessa. Tällä oppitunnilla luomme lomakkeen, jonka avulla voimme muokata tuotetietoja.

Avataan tuotesovelluksemme ja luodaan kansioon products tiedosto EditProductForm.jsx. Komponentin EditProductForm luominen on samanlaista kuin NewProductForm, lukuun ottamatta joitain eroja, joihin keskitymme. Siksi kopioi koko NewProductForm.jsx:n koodi ja liitä se luotuun tiedostoon EditProductForm.jsx. Aloitetaan nyt järjestyksessä.

Poista importista nanoid, sitä emme tarvitse id:n generoimiseen. Korvaa import productAdded kohteella productUpdated, sillä täällä aiomme käyttää actionia päivittämiseen, ei tuotteen lisäämiseen.

Seuraavaksi vaihdamme komponenttimme funktion nimen NewProductForm:sta EditProductForm:ksi.

Ennen kuin aloitamme paikallisten tilojen määrittelyn EditProductForm:ssa name:lle, desc:lle, price:lle ja amount:lle, lisätään muutama koodirivi. Kuten aiemmin mainitsimme, täällä meidän ei tarvitse generoida id:ta. Nyt tehtävämme on saada se muokattavan tuotteen datasta. Olemme jo tehneet näin luodessamme erillistä sivua tuotteelle. Joten, saamme id:n useParams -hookin avulla, ja sitten löydämme tarvitsemamme tuotteen, käyttämällä useSelector -hookkia (älä unohda importata molemmat hookit tiedoston alussa):

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

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

Tämän jälkeen muutetaan lohko paikallisten tilojen määrittelylle. Nyt meidän täytyy asettaa alkuarvoksi storesta saadut tuotetiedot. Ensimmäinen tila näyttää tältä, muokkaa kolme muuta itse:

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

useDispatch:lle määritetyn muuttujan jälkeen lisätään vielä yksi koodirivi tällä kertaa useNavigate -hookkia varten. Käytämme sitä palataksemme tuotteen sivulle, kun käyttäjä tallentaa lomakkeeseen tekemänsä muutokset:

const navigate = useNavigate()

Importtaa tämä hook myös tiedoston alussa:

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

Seuraavaksi meillä on käsittelijät syötekentille. Ja niiden jälkeen meidän täytyy korjata funktio onSaveProductClick. Nyt siinä klikkauksen yhteydessä lähetämme actionin productUpdated saadulla id:llä ja muokatulla datalla objektin muodossa. Sen jälkeen lisäämme navigate:n siirtyäksemme muokatun tuotteen sivulle:

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

Vielä täytyy vain palautettavassa HTML:stä löytää rivi:

<h2>Add a New Product</h2>

Ja korvata se seuraavalla:

<h2>Edit Product</h2>

Avaa opiskelijasovelluksesi. Luo tiedosto EditStudentForm.jsx vastaavasti kuin NewStudentForm.jsx. Tee siihen muutokset, kuten oppitunnilla on näytetty.