Dodatni reduktorji v Redux

Odprimo našo aplikacijo s produkti, in v njej datoteko productsSlice.js. Verjetno ste opazili, da smo thunk fetchProducts ustvarili kot ločeno funkcijo? To smo naredili zato, ker createSlice ne podpira definiranja thunkov. Kako naj v tem primeru prisilimo reducer slice products, da se odziva na akcije, ki so definirane zunaj products? Navsezadnje moramo obdelati akcije, ki jih pošilja thunk fetchProducts.

Za takšne primere ima createSlice lastnost extraReducers, ki omogoča dodajanje dodatnih reduktorjev, ki pa bodo obdelovali akcije, definirane ne v tem sliceu.

Dodajmo zdaj v telesu funkcije createSlice za lastnostjo reducers z vsemi reduktorji še eno metodo extraReducers:

extraReducers() {},

Tej metodi moramo posredovati objekt builder, ki ima metode, s pomočjo katerih lahko dodamo dodatne reduktorje:

extraReducers(builder) {},

Uporabili bomo eno od metod builder - addCase, ki kot prvi parameter sprejme ustvarjalca akcije (action creator), kot drugega pa reducer. Ena od akcij, ki jo bo poslal fetchProducts ob zahtevi, je fetchProducts.pending, kar nam pove, da je zahteva poslana. V tem primeru spremenimo status v 'in progress' (pred tem je bil 'idle'):

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

Zdaj pa obdelajmo akcijo, ki se pošlje v primeru uspešne zahteve. Tu bomo spremenili ne le status v stanju (state) na 'success', ampak bomo tudi produkte v slice products vzeli iz payload akcije. Da zberemo vse produkte, bomo potrebovali 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)
		})
},

V primeru neuspešne zahteve bomo spremenili status na 'fail' in v stanje (state) zapisali sporočilo o napaki:

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

Če zdaj zaženemo našo aplikacijo in v meniju kliknemo na 'Products', potem bomo čez nekaj sekund (se spomnite zamika, ki smo ga nastavili na strežniku?) videli seznam s produkti.

Prav tako bomo videli spremembe tudi v Redux DevTools. Zdaj se bodo naši produkti pojavili tudi v stanju (state) (poglejte zavihek 'State'), če ste kliknili na akcijo products/fetchProducts/fulfilled. Pojavil se bo tudi nov status 'success'. Kliknite zdaj na akcijo products/fetchProducts/pending in poglejte, kaj je zdaj drugače na zavihku 'State'.

Edini neprijeten trenutek, ki se vam lahko zgodi (o tem sem govoril v prejšnji lekciji) - je podvajanje zahteve za podatke. Posledično bi imeli na seznamu ne 8, ampak celo 16 produktov in kritična opozorila v konzoli razvijalca. Ugotovimo kaj s tem v naslednji lekciji.

Odprite vašo aplikacijo s študenti. Odprite v njej datoteko studentsSlice.js. V telesu funkcije createSlice za lastnostjo reducers dodajte lastnost extraReducers. Posredujte metodi extraReducers builder.

Z metodo builder.addCase dodajte obdelavo za akcije pending, fulfilled in rejected, ki jih pošilja fetchStudents ob zahtevi podatkov, kot je prikazano v lekciji.