Visualizzazione dei risultati del thunk nel componente in Redux

Nella lezione precedente abbiamo inviato una richiesta POST utilizzando il thunk addProduct. Ora visualizziamo i suoi risultati nel componente.

Apriamo la nostra applicazione dei prodotti, e in essa il file NewProductForm.jsx, poiché questo componente è responsabile per l'aggiunta di un nuovo prodotto. Guardiamo le righe con gli import. Sostituiamo l'import dell'azione productAdded, con l'import del thunk addProduct:

import { addProduct } from './productsSlice'

Ora, poiché non tracciamo nello slice lo stato 'pending' della richiesta, facciamo in modo che l'utente possa cliccare sul pulsante di salvataggio prodotto solo una volta, dato che non vogliamo le stesse richieste ripetute. Per fare questo, creiamo un altro stato locale:

const [requestStatus, setRequestStatus] = useState('idle')

Successivamente, dopo i gestori di eventi e prima della funzione onSaveProductClick scriviamo il codice in cui controlliamo se tutti i campi del modulo sono compilati e se lo stato della richiesta è 'idle':

const canBeSaved =
	[name, desc, price, amount, sellerId].every(Boolean) &&
	requestStatus === 'idle'

Poi modificheremo il codice per onSaveProductClick. Innanzitutto sarà una funzione asincrona e verrà eseguita se la condizione sopra è vera:

const onSaveProductClick = async () => {
	if (canBeSaved) {}
}

Nonostante nello slice non tracciamo lo stato 'rejected', possiamo comunque stampare in console l'errore, per farlo useremo la costruzione try-catch. Qui aggiungeremo anche finally, per dopo l'esecuzione della richiesta reimpostare lo stato locale a 'idle':

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
		} catch (err) {
			console.error('errore salvataggio prodotto: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Con i blocchi catch e finally abbiamo sistemato, scriviamo il codice per il blocco try. Qui imposteremo lo stato locale a 'in progress', finché non riceviamo una risposta come risultato dell'operazione del thunk, poi invieremo il nostro thunk addProduct. Usare la costruzione try-catch in base al tipo di risposta ci aiuterà la funzione RTK unwrap, che aggiunge alla promise restituita. Poi, se la richiesta ha avuto successo, impostiamo gli stati locali ai loro stati iniziali. Il codice completo per onSaveProductClick sarà così:

const onSaveProductClick = async () => {
	if (canBeSaved) {
		try {
			setRequestStatus('in progress')
			await dispatch(
				addProduct({ name, desc, price, amount, seller: sellerId })).unwrap()
			setName('')
			setDesc('')
			setPrice(0)
			setAmount(0)
			setSellerId('')
		} catch (err) {
			console.error('errore salvataggio prodotto: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Avviamo la nostra applicazione e proviamo ad aggiungere un nuovo prodotto. Come puoi vedere, in caso di richiesta riuscita i campi si puliscono e il nuovo prodotto viene aggiunto alla lista dei prodotti. Dai anche un'occhiata nel browser in Redux DevTools e naviga tra le sue schede, guarda le azioni e come cambia il tuo stato.

Apri la tua applicazione con gli studenti. Apri in essa il file NewStudentForm.jsx. Aggiungi un altro stato locale requestStatus, e impostalo inizialmente a 'idle'. Dopo aver preso visione del materiale della lezione, crea la variabile canBeSaved, con la quale il pulsante di salvataggio dei nuovi dati dello studente funzionerà/non funzionerà, in base al valore di requestStatus e alla compilazione dei campi.

Scrivi il codice asincrono per onSaveStudentClick, che cambierà il valore di requestStatus a seconda della situazione, invierà il thunk addProduct con i dati del nuovo studente, pulirà i campi in caso di richiesta riuscita e stamperà in console l'errore in caso di fallimento, come mostrato nella lezione. Usa per questo la costruzione try-catch e la funzione RTK unwrap.

Avvia la tua applicazione, aggiungi un nuovo studente e assicurati che tutto funzioni.