Form e Stati Locali in Redux

Nelle lezioni precedenti, abbiamo imparato a ottenere dati dallo store e a visualizzarli in un componente React. In questa lezione, inizieremo ad aggiungere nuovi dati. Lo faremo tramite un modulo, compilando il quale il venditore potrà aggiungere un nuovo prodotto.

Iniziamo col dire che non ha sempre senso utilizzare lo stato globale di Redux. Ci sono casi in cui, per le nostre esigenze, possiamo creare stati locali. Chiameremo stati locali quelli utilizzati all'interno di un componente specifico per esigenze tecniche. Ad esempio, per nascondere o mostrare qualcosa tramite un pulsante.

Nel nostro caso, l'utente inserirà dati in un modulo e, naturalmente, avremo bisogno di stati per questo. Potremmo utilizzare lo stato globale di Redux, ma non avrebbe senso, poiché i nostri stati funzioneranno solo in un punto dell'applicazione, per il modulo di aggiunta prodotto. La regola principale da seguire è che gli stati locali non devono funzionare al di fuori del componente in cui sono creati, e in nessun caso devono interagire con lo store. Questa pratica è spesso utilizzata durante la creazione di moduli.

Apriamo la cartella products della nostra applicazione con i prodotti, creiamo al suo interno il file NewProductForm.jsx e importiamo l'hook useState:

import { useState } from 'react'

Ora creiamo il componente con il modulo e impostiamo al suo interno i normali stati, come facevamo in precedenza in React. Abbiamo bisogno di stati per lavorare con il nome, la descrizione, il prezzo e la quantità del prodotto:

export const NewProductForm = () => {
	const [name, setName] = useState('')
	const [desc, setDesc] = useState('')
	const [price, setPrice] = useState(0)
	const [amount, setAmount] = useState(0)
}

Successivamente, aggiungiamo la gestione standard per ogni campo quando l'utente inserisce i dati:

const onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)

E poi restituiamo nel componente il markup con il titolo e un modulo vuoto:

return (
	<div>
		<h2>Aggiungi un Nuovo Prodotto</h2>
		<form>
		</form>
	</div>
)

Aprite la vostra applicazione con gli studenti. Create il file NewStudentForm.jsx nella cartella students. Impostate nel componente NewStudentForm degli stati locali per i campi a voi necessari, scrivete per ogni campo la gestione, come mostrato nella lezione.

Restituite nel componente NewStudentForm il markup, contenente il titolo e un modulo vuoto.