Doplnkové reducery v Reduxe

Otvorme našu aplikáciu s produktmi, a v nej súbor productsSlice.js. Pravdepodobne ste si všimli, že sme vytvorili thunk fetchProducts ako samostatnú funkciu? Urobili sme to preto, lebo createSlice nepodporuje definíciu thunks. Ako v tomto prípade môžeme prinútiť reducer slice products reagovať na akcie, ktoré sú definované mimo products? Veď práve potrebujeme spracovať akcie, ktoré posiela thunk fetchProducts.

Pre takéto prípady má createSlice vlastnosť extraReducers, ktorá umožňuje pridať doplnkové reducery, ktoré naopak budú spracovávať akcie, definované nie v tomto slice.

Teraz v tele funkcie createSlice po vlastnosti reducers so všetkými reducermi pridajme ešte jednu metódu extraReducers:

extraReducers() {},

Tejto metóde musíme odovzdať objekt builder, ktorý má metódy, s ktorými je možné pridať doplnkové reducery:

extraReducers(builder) {},

Budeme používať jednu z metód builder - addCase, ktorá ako prvý parameter prijíma action creator, a ako druhý reducer. Jedna z akcií, ktorú nám bude odosielať fetchProducts pri požiadavke je fetchProducts.pending, čo nám hovorí o tom, že požiadavka bola odoslaná. V tomto prípade zmeňme stav na 'in progress' (predtým bol 'idle'):

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

Teraz spracujme akciu, ktorá sa odošle v prípade úspešnej požiadavky. Tu budeme meniť nielen stav v stave na 'success', ale aj zoberieme produkty do slice products z payload akcie. Aby sme zhromaždili všetky produkty, budeme potrebovať metódu 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 prípade neúspešnej požiadavky zmeníme stav na 'fail' a zapíšeme do stavu správu o chybe:

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

Ak teraz spustíme našu aplikáciu a v menu klikneme na 'Products', tak o pár sekúnd (pamätáte na oneskorenie, ktoré sme nastavili na serveri?) uvidíme zoznam s produktmi.

Presne tak uvidíme zmeny aj v Redux DevTools. Teraz sa naše produkty objavia aj v stave (pozrite sa na kartu 'State'), ak ste klikli na akciu products/fetchProducts/fulfilled. Tam sa objaví aj nový stav 'success'. Kliknite teraz na akciu products/fetchProducts/pending a pozrite sa, čím sa teraz líši karta 'State'.

Jediný nepríjemný moment, ktorý sa vám môže stať (hovoril som o tom na predchádzajúcej lekcii) - je duplikácia požiadavky údajov. V dôsledku čoho, u nás v zozname nebude 8, ale celých 16 produktov a kritické upozornenia v konzole vývojára. Poďme sa tým zaoberať na ďalšej lekcii.

Otvorte vašu aplikáciu so študentmi. Otvorte v nej súbor studentsSlice.js. V tele funkcie createSlice po vlastnosti reducers pridajte vlastnosť extraReducers. Odovzdajte metóde extraReducers builder.

Pomocou metódy builder.addCase pridajte spracovanie pre akcie pending, fulfilled a rejected, ktoré odosiela fetchStudents pri požiadavke údajov, ako je ukázané v lekcii.