Bykomende Reduseerders in Redux

Kom ons maak ons aansoek met produkte oop, en daarin die lêer productsSlice.js. Jy het seker opgemerk dat ons die thunk fetchProducts as 'n aparte funksie geskep het? Ons het dit so gedoen omdat createSlice nie die definisie van thunks ondersteun nie. Hoe kan ons in hierdie geval die reduseerder van die products sny reageer op aksies wat buite die products sny gedefinieer is? Ons moet immers die aksies hanteer wat deur die thunk fetchProducts gestuur word.

Vir sulke gevalle het createSlice die eienskap extraReducers, wat toelaat om bykomende reduseerders by te voeg, wat op hul beurt die aksies sal hanteer wat nie in hierdie sny gedefinieer is nie.

Kom ons voeg nou in die liggaam van die funksie createSlice na die eienskap reducers met al die reduseerders 'n ekstra metode extraReducers by:

extraReducers() {},

Aan hierdie metode moet ons 'n objek builder oorhandig, wat metodes het waarmee jy bykomende reduseerders kan byvoeg:

extraReducers(builder) {},

Ons sal een van die metodes van builder gebruik - addCase, wat as eerste parameter 'n action creator aanvaar, en as tweede 'n reduseerder. Een van die aksies wat deur fetchProducts gestuur sal word tydens die versoek is fetchProducts.pending, wat vir ons sê dat die versoek gestuur is. Kom ons verander in hierdie geval die status na 'in progress' (voorheen was dit 'idle'):

extraReducers(builder) {
	builder.addCase(fetchProducts.pending, (state) => {
		state.status = 'in progress'
	})
},

Laat ons nou die aksie hanteer wat gestuur word in die geval van 'n suksesvolle versoek. Hier sal ons nie net die status in die staat verander na 'success' nie, maar ook die produkte in die products sny uit die payload van die aksie haal. Om al die produkte bymekaar te maak sal ons die metode concat nodig hê:

extraReducers(builder) {
	builder
		.addCase(fetchProducts.pending, (state) => {
			state.status = 'in progress'
		})
		.addCase(fetchProducts.fulfilled, (state, action) => {
			state.status = 'success'
			state.products = state.products.concat(action.payload)
		})
},

In die geval van 'n mislukte versoek sal ons die status verander na 'fail' en in die staat 'n foutboodskap aanteken:

.addCase(fetchProducts.rejected, (state, action) => {
	state.status = 'fail'
	state.error = action.error.message
})

As ons nou ons aansoek begin en in die menu op 'Products' klik, dan sal ons na 'n paar sekondes (onthou jy die vertraging wat ons op die bediener gestel het?) 'n lys met produkte sien.

Net so sal ons die veranderinge in Redux DevTools sien. Nou sal ons produkte ook in die staat verskyn (kyk na die oortjie 'State'), as jy op die aksie products/fetchProducts/fulfilled geklik het. Daar sal ook die nuwe status 'success' verskyn. Klik nou op die aksie products/fetchProducts/pending en kyk hoe die oortjie 'State' nou anders lyk.

Die enigste onpleasante oomblik wat vir jou mag gebeur (ek het daaroor gepraat in die vorige les) - is die duplisering van data versoeke. As gevolg daarvan sal ons in die lys nie 8 nie, maar heelwat 16 produkte hê en kritieke waarskuwings in die ontwikkelaarskonsole. Kom ons los dit in die volgende les op.

Maak jou aansoek met studente oop. Maak daarin die lêer studentsSlice.js oop. In die liggaam van die funksie createSlice voeg na die eienskap reducers die eienskap extraReducers by. Handig aan die metode extraReducers die builder oor.

Gebruik die metode builder.addCase om hantering by te voeg vir die aksies pending, fulfilled en rejected, wat deur fetchStudents gestuur word tydens data versoeke, soos in die les gewys.