Vertoon die resultate van thunk-werk in 'n komponent in Redux

In die vorige les het ons 'n POST-versoek gestuur met behulp van die thunk addProduct. Laat ons nou die resultate van sy werk in die komponent vertoon.

Maak ons toepassing met produkte oop, en daarin die lêer NewProductForm.jsx, aangesien hierdie komponent verantwoordelik is vir die byvoeging van 'n nuwe produk. Laat ons kyk na die reëls met die invoere. Vervang die invoer van die aksie productAdded, met die invoer van die thunk addProduct:

import { addProduct } from './productsSlice'

Nou, aangesien ons nie die status 'pending' van die versoek in die skyfie volg nie, laat ons dit so maak, sodat die gebruiker die knoppie met die bewaring van die produk net een keer kan druk, want ons het nie dieselfde herhalende versoeke nodig nie. Om dit te doen, skep ons nog 'n plaaslike staat:

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

Daarna, na die verwerkers en voor die funksie onSaveProductClick, skryf ons kode waarin ons sal kontroleer of alle velde van die vorm deur ons gevul is en of die versoekstatus in 'idle' is:

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

Dan sal ons die kode vir onSaveProductClick verander. Eerstens sal dit 'n asinchrone funksie wees en dit sal uitgevoer word, as die bogenoemde voorwaarde waar is:

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

Ondanks die feit dat ons nie die status 'rejected' in die skyfie volg nie, kan ons steeds 'n fout in die konsole vertoon, vir dit sal ons gebruik maak van die konstruksie try-catch. Ook hier sal ons nog finally byvoeg, om na die uitvoering van die versoek weer die plaaslike staat op 'idle' te stel:

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

Met die catch en finally blokke het ons klaar, laat ons die kode vir die try blok skryf. Hier sal ons die plaaslike status op 'in progress' stel, totdat 'n antwoord aan ons terugbesorg word as gevolg van die thunk se werk, dan stuur ons ons thunk addProduct. Om die try-catch konstruksie te gebruik, afhangende van die tipe antwoord, sal die RTK funksie unwrap ons help, wat dit by die terugbesorgde belofte voeg. Dan, as die versoek suksesvol was, stel ons die plaaslike state in hul beginstate. Die volle kode vir onSaveProductClick sal so lyk:

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

Laat ons ons toepassing begin en probeer om 'n nuwe produk by te voeg. Soos jy kan sien, in die geval van 'n suksesvolle versoek word die velde skoongemaak en die nuwe produk bygevoeg in die lys van produkte. Kyk ook in die blaaier in Redux DevTools en beweeg tussen sy oortjies, kyk na die aksies en hoe jou staat verander.

Maak jou toepassing met studente oop. Maak daarin die lêer NewStudentForm.jsx oop. Voeg nog 'n plaaslike staat requestStatus by, en stel dit aanvanklik op 'idle'. Deur die materiaal van die les te bestudeer, skep die veranderlike canBeSaved, waarmee die knoppie vir die bewaring van nuwe studentedata sal werk/nie werk nie, afhangende van die waarde van requestStatus en van die vul van die velde.

Skryf asinchrone kode vir onSaveStudentClick, wat die waarde van requestStatus sal verander volgens die situasie, die thunk addProduct sal stuur met die data van die nuwe student, die velde sal skoonmaak in die geval van 'n suksesvolle versoek en 'n fout in die konsole sal vertoon in die geval van mislukking, soos getoon in die les. Gebruik hiervoor die konstruksie try-catch en die RTK funksie unwrap.

Begin jou toepassing, voeg 'n nuwe student by en maak seker dat alles werk.