Afișarea rezultatelor thunk în componentă în Redux

În lecția anterioară am trimis o cerere POST folosind thunk addProduct. Acum să afișăm rezultatele operării sale în componentă.

Deschideți aplicația noastră cu produse, iar în ea fișierul NewProductForm.jsx, deoarece această componentă este responsabilă pentru adăugarea noului produs. Să ne uităm la liniile de import. Înlocuiți importul acțiunii productAdded, cu importul thunk addProduct:

import { addProduct } from './productsSlice'

Acum, deoarece nu urmărim în slice starea 'pending' a cererii, să facem astfel încât utilizatorul să poată apăsa butonul de salvare a produsului doar o dată, deoarece nu avem nevoie de aceleași cereri repetate. Pentru aceasta, să creăm încă o stare locală:

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

Apoi, după manipulatoare și înainte de funcția onSaveProductClick, să scriem cod în care vom verifica dacă toate câmpurile formularului sunt completate și dacă starea cererii este 'idle':

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

Apoi vom modifica codul pentru onSaveProductClick. În primul rând, aceasta va fi o funcție asincronă și va fi executată dacă condiția de mai sus este adevărată:

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

În ciuda faptului că în slice nu urmărim starea 'rejected', tot putem afișa în consolă eroarea, pentru aceasta vom folosi constructia try-catch. De asemenea, aici vom adăuga și finally, pentru a seta din nou starea locală la 'idle' după executarea cererii:

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

Cu blocurile catch și finally ne-am descurcat, să scriem cod pentru blocul try. Aici vom seta starea locală la 'in pogress', până când nu primim vreun răspuns ca rezultat al operării thunk, apoi vom trimite thunk-ul nostru addProduct. Utilizarea constructiei try-catch în funcție de tipul răspunsului ne va fi ajutată de funcția RTK unwrap, pe care o adaugă la promisiunea returnată. Apoi, dacă cererea a fost cu succes, setăm stările locale la stările lor inițiale. Codul complet pentru onSaveProductClick va arăta astfel:

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('save product error: ', err)
		} finally {
			setRequestStatus('idle')
		}
	}
}

Să pornim aplicația noastră și să încercăm să adăugăm un nou produs. După cum vedeți, în caz de succes câmpurile se golește și noul produs se adaugă în lista de produse. De asemenea, aruncați o privire în browser în Redux DevTools și navigați prin filele sale, uitați-vă la acțiuni și cum se schimbă starea dumneavoastră.

Deschideți aplicația dumneavoastră cu studenții. Deschideți în ea fișierul NewStudentForm.jsx. Adăugați încă o stare locală requestStatus, și setați-o inițial la 'idle'. După ce v-ați familiarizat cu materialele lecției, creați variabila canBeSaved, cu ajutorul căreia butonul de salvare a noilor date ale studentului va funcționa/ nu va funcționa, în funcție de valoarea lui requestStatus și de completarea câmpurilor.

Scrieți cod asincron pentru onSaveStudentClick, care va schimba valoarea lui requestStatus în funcție de situație, va trimite thunk addProduct cu datele noului student, va goli câmpurile în caz de succes și va afișa în consolă eroarea în caz de eșec, după cum se arată în lecție. Folosiți pentru aceasta constructia try-catch și funcția RTK unwrap.

Porniți aplicația dumneavoastră, adăugați un nou student și asigurați-vă că totul funcționează.