Dodatni redukeri u Redux-u

Hajde da otvorimo našu aplikaciju sa proizvodima, a u njoj fajl productsSlice.js. Verovatno ste primetili da smo thunk fetchProducts pravili kao posebnu funkciju? To smo uradili jer createSlice ne podržava definisanje thunks-a. Kako da u ovom slučaju nateramo reducer slajsa products da odgovara na akcije, koje su definisane van products? Upravo nam je potrebno da obradimo akcije koje šalje thunk fetchProducts.

Za takve slučajeve, createSlice ima svojstvo extraReducers, koje omogućava dodavanje dodatnih redukera, koji će zauzvrat obraditi akcije definisane ne u ovom slajsu.

Hajde sada u telu funkcije createSlice nakon svojstva reducers sa svim redukerima dodamo još jednu metodu extraReducers:

extraReducers() {},

Ovoj metodi moramo proslediti objekat builder, koji ima metode, uz pomoć kojih možemo dodati dodatne redukere:

extraReducers(builder) {},

Koristićemo jednu od metoda builder - addCase, koja kao prvi parametar prima action creator, a kao drugi reducer. Jedna od akcija, koju će nam slati fetchProducts pri zahtevu je fetchProducts.pending, što nam govori da je zahtev poslat. Hajde da u ovom slučaju promenimo status na 'in progress' (pre toga je bio 'idle'):

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

Sada obradimo akciju, koja će se poslati u slučaju uspešnog zahteva. Ovde ćemo promeniti ne samo status u stanju na 'success', već ćemo i preuzeti proizvode u slajs products iz payload akcije. Da bismo sakupili sve proizvode trebaće nam metoda 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)
		})
},

U slučaju neuspešnog zahteva promenićemo status na 'fail' i upisaćemo u stanje poruku o grešci:

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

Ako sada pokrenemo našu aplikaciju i u meniju kliknemo na 'Products', onda ćemo za par sekundi (sećate se kašnjenja, koje smo postavili na serveru?) videti listu sa proizvodima.

Tačno tako ćemo videti promene i u Redux DevTools. Sada će se naši proizvodi pojaviti i u stanju (pogledajte karticu 'State'), ako ste kliknuli na akciju products/fetchProducts/fulfilled. Tamo će se pojaviti i novi status 'success'. Kliknite sada na akciju products/fetchProducts/pending i pogledajte, čime se sada razlikuje kartica 'State'.

Jedini neprijatan trenutak, koji se vama moće desiti (govorio sam o ovome na prethodnoj lekciji) - je dupliranje zahteva za podacima. Kao rezultat toga, u našoj listi će biti ne 8, već čak 16 proizvoda i kritična upozorenja u konzoli programera. Hajde da se pozabavimo time na sledećoj lekciji.

Otvorite vašu aplikaciju sa studentima. Otvorite u njoj fajl studentsSlice.js. U telu funkcije createSlice nakon svojstva reducers dodajte svojstvo extraReducers. Prosledite metodu extraReducers builder.

Uz pomoć metode builder.addCase dodajte obradu za akcije pending, fulfilled i rejected, koje šalje fetchStudents prilikom zahteva podataka, kao što je pokazano u lekciji.