Papildomi Redukseriai Redux

Atidarykime mūsų produktų aplikaciją, o joje failą productsSlice.js. Tikriausiai jūs pastebėjote, kad thunk fetchProducts sukūrėme kaip atskirą funkciją? Taip padarėme, nes createSlice nepalaiko thunk apibrėžimo. Kaip mums šiuo atveju priversti sluoksnio products redukserį reaguoti į veiksmus, kurie yra apibrėžti už products ribų? Juk mums reikia apdoroti veiksmus, kuriuos siunčia thunk fetchProducts.

Tokiais atvejais createSlice turi savybę extraReducers, kuri leidžia pridėti papildomus redukserius, kurie savo ruožtu ir apdoros veiksmus, apibrėžtus ne šiame sluoksnyje.

Dabar funkcijos createSlice kūne po savybės reducers su visais redukseriais pridėkime dar vieną metodą extraReducers:

extraReducers() {},

Šiam metodui turime perduoti objektą builder, kuris turi metodus, su kurių pagalba galima pridėti papildomus redukserius:

extraReducers(builder) {},

Mes naudosime vieną iš builder metodų - addCase, kuris pirmu parametru priima veiksmo kūrėją, o antruoju - redukserį. Vienas iš veiksmų, kurį mums siųs fetchProducts užklausos metu, yra fetchProducts.pending, kuris mums rodo, kad užklausa išsiųsta. Šiuo atveju pakeiskime statusą į 'in progress' (iki šiol jis buvo 'idle'):

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

Dabar apdorokime veiksmą, kuris bus išsiųstas sėkmingos užklausos atveju. Čia mes pakeisime ne tik statusą stetyje į 'success', bet ir paimsime produktus į sluoksnį products iš veiksmo payload. Kad surinktume visus produktus, mums prireiks metodo concat:

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

Nesėkmingos užklausos atveju pakeisime statusą į 'fail' ir į stetą įrašysime klaidos pranešimą:

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

Jei mes dabar paleisime mūsų aplikaciją ir meniu spustelėsime 'Products', tai po poros sekundžių (prisimenate delą, kurį nustatėme serveryje?) pamatysime produktų sąrašą.

Taip pat pamatysime pakeitimus ir Redux DevTools. Dabar mūsų produktai pasirodys ir stetyje (pažiūrėkite skirtuką 'State'), jei spustelėjote veiksmą products/fetchProducts/fulfilled. Ten taip pat pasirodys ir naujas statusas 'success'. Dabar spustelėkite veiksmą products/fetchProducts/pending ir pažiūrėkite, kuo skiriasi skirtukas 'State'.

Vienintelis nemalonus momentas, kuris jums gali atsitikti (apie tai kalbėjau ankstesnėje pamokoje) - tai duomenų užklausos dubliavimasis. Dėl to mūsų sąraše gausime ne 8, o visus 16 produktų ir kritinius įspėjimus plėtotojo konsolėje. Spręskime šią problemą kitoje pamokoje.

Atidarykite savo studentų aplikaciją. Atidarykite joje failą studentsSlice.js. Funkcijos createSlice kūne po savybės reducers pridėkite savybę extraReducers. Perduokite metodui extraReducers builder.

Naudodami metodą builder.addCase pridėkite apdorojimą veiksmams pending, fulfilled ir rejected, kuriuos siunčia fetchStudents užklausos metu, kaip parodyta pamokoje.