Modulo per la modifica dei dati in Redux

Ora abbiamo un reducer per modificare i dati nello store. In questa lezione creeremo un modulo con cui potremo modificare i dati del prodotto.

Apriamo la nostra applicazione di prodotti e creiamo nella cartella products il file EditProductForm.jsx. La creazione del componente EditProductForm sarà analoga a NewProductForm, ad eccezione di alcune differenze, su cui ci soffermeremo. Quindi copiate completamente il codice di NewProductForm.jsx e incollatelo nel file creato EditProductForm.jsx. Ora iniziamo con ordine.

Rimuovete dall'importazione nanoid, qui non ci serve generare l'id. Sostituite l'importazione productAdded con productUpdated, dato che qui useremo l'action per l'aggiornamento, e non per l'aggiunta del prodotto.

Successivamente cambiamo il nome della funzione del nostro componente da NewProductForm a EditProductForm.

Prima di impostare gli stati locali nella funzione EditProductForm per name, desc, price e amount, inseriamo ancora alcune righe di codice. Come accennato in precedenza, qui non abbiamo bisogno di generare l'id. Ora il nostro compito è ottenerlo dai dati del prodotto da modificare. Lo abbiamo già fatto quando abbiamo creato la pagina separata per il prodotto. Quindi, otteniamo l'id usando l'hook useParams, e poi troviamo il prodotto che ci serve, usando l'hook useSelector (non dimenticate di importare entrambi gli hook all'inizio del file):

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

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

Dopodiché modifichiamo il blocco con la dichiarazione degli stati locali. Ora dobbiamo impostare come valore iniziale i dati del prodotto ottenuti dallo store. Ecco come apparirà il primo stato, modificate voi i restanti tre:

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

Dopo l'assegnazione della variabile per useDispatch aggiungiamo un'altra riga di codice questa volta per l'hook useNavigate. Lo useremo per tornare alla pagina del prodotto quando l'utente salverà le modifiche apportate nel modulo:

const navigate = useNavigate()

Importate anche questo hook all'inizio del file:

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

Successivamente abbiamo i gestori di eventi per i campi di input. E dopo di essi dobbiamo modificare la funzione onSaveProductClick. Ora in essa al click invieremo l'azione productUpdated con l'id ottenuto e i dati modificati sotto forma di oggetto. Poi aggiungeremo la nostra navigate, per passare alla pagina del prodotto modificato:

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

Rimane solo nella nostra veristica restituita trovare la riga:

<h2>Add a New Product</h2>

E sostituirla con:

<h2>Edit Product</h2>

Aprite la vostra applicazione con gli studenti. Create il file EditStudentForm.jsx per analogia con NewStudentForm.jsx. Apportate ad esso le modifiche, come mostrato nella lezione.