Visar resultatet av ett thunk-arbete i en komponent i Redux

I förra lektionen skickade vi en POST-förfrågan med hjälp av thunk addProduct. Låt oss nu visa resultatet av dess arbete i komponenten.

Öppna vår produktapplikation, och i den filen NewProductForm.jsx, eftersom denna komponent är ansvarig för att lägga till en ny produkt. Låt oss titta på raderna med import. Ersätt importen av action productAdded med importen av thunk addProduct:

import { addProduct } from './productsSlice'

Nu, eftersom vi inte spårar statusen 'pending' för förfrågan i slice, låt oss göra så att användaren bara kan klicka på knappen för att spara produkten en gång, eftersom vi inte vill ha samma upprepade förfrågningar. För att göra detta, låt oss skapa ytterligare en lokal state:

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

Sedan, efter hanterarna och före funktionen onSaveProductClick, skriver vi kod där vi kontrollerar om alla formulärfält är ifyllda och om förfrågningsstatusen är 'idle':

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

Sedan kommer vi att ändra koden för onSaveProductClick. För det första kommer det att vara en asynkron funktion och den kommer att utföras om ovanstående villkor är sant:

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

Trots att vi inte spårar statusen 'rejected' i slice, kan vi fortfarande skriva ut felet till konsolen, för att göra detta använder vi konstruktionen try-catch. Här kommer vi också att lägga till finally, för att efter att förfrågan har utförts återställa den lokala state till 'idle':

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

Med catch och finally blocken har vi tagit hand om, låt oss skriva koden för try blocket. Här sätter vi den lokala statusen till 'in progress', tills vi får något svar som ett resultat av thunk-arbetet, sedan skickar vi vår thunk addProduct. Att använda konstruktionen try-catch beroende på typen av svar kommer att hjälpas av RTK-funktionen unwrap, som den lägger till i det returnerade promiset. Sedan, om förfrågan var framgångsrik, återställer vi de lokala state till deras initiala tillstånd. Den fullständiga koden för onSaveProductClick kommer att se ut så här:

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')
		}
	}
}

Låt oss starta vår applikation och försöka lägga till en ny produkt. Som du ser, i fallet med en framgångsrik förfrågan rensas fälten och den nya produkten läggs till i produktlistan. Kolla också i webbläsaren i Redux DevTools och navigera genom dess flikar, titta på actions och hur din state ändras.

Öppna din studentapplikation. Öppna filen NewStudentForm.jsx i den. Lägg till ytterligare en lokal state requestStatus, och sätt den initialt till 'idle'. Efter att ha gått igenom lektionens material, skapa variabeln canBeSaved, med hjälp av vilken knappen för att spara ny studentdata kommer att fungera/inte fungera, beroende på värdet av requestStatus och på om fälten är ifyllda.

Skriv asynkron kod för onSaveStudentClick, som kommer att ändra värdet på requestStatus beroende på situation, skicka thunk addProduct med data för den nya studenten, rensa fälten i fallet med en framgångsrik förfrågan och skriva ut felet till konsolen i händelse av misslyckande, som visas i lektionen. Använd för detta konstruktionen try-catch och RTK-funktionen unwrap.

Starta din applikation, lägg till en ny student och se till att allt fungerar.