Reducerji v Redux

V prejšnji lekciji smo s funkcijo createSlice ustvarili slice za produkte products in reducer, ki bo posodabljal ta slice, shranjen v store. Še enkrat spomnim, da se v Redux podatki stanja spreminjajo s pomočjo reducerjev.

Ne smemo pozabiti, da na reducerje veljajo številne omejitve. Reducer posodobi stanje le na podlagi prejetih vrednosti trenutnega stanja in objekta action, nato pa se odloči, kako spremeniti stanje in vrne njegovo novo vrednost.

Vemo, da so objekti in tabele v JavaScript privzeto mutabilni (spremenljivi). Prav tako vemo, da stanja state ne smemo spreminjati neposredno, v tem primeru je treba delati le s kopijami. Temu pravilu se mora podrediti tudi reducer. Toda pisanje takšne logike ročno je lahko precej naporno in zapleteno opravilo, in tukaj na pomoč priskoči funkcija createSlice, ki uporablja knjižnico Immer, ki pretvori vaš 'mutabilni' kodo v 'nemutabilnega'. Tako lahko gremimo in poenostavimo življenje le ob uporabi funkcij createSlice ali createReducer.

Med omejitve reducerja spada tudi uporaba asinhrone logike, izračun naključnih vrednosti in izvajanje drugih "stranskih učinkov". In zdaj, ko smo se z reducerjem pobližje spoznali, se vrnimo k naši aplikaciji s produkti.

V naši aplikaciji imamo store, ki smo ga ustvarili v prejšnjih lekcijah, toda za zdaj v njem ni nič. Odprimo naš datoteko store.js in mu dodajmo malo kode. Za začetek vanj uvozimo funkcijo reducer za produkte:

import productsReducer from '../parts/products/productsSlice'

Zdaj lahko kot reducer navedemo uvoženo funkcijo productsReducer:

export default configureStore({
	reducer: {
		products: productsReducer
	}
})

Z zgornjo vrstico povemo našemu store, da se bodo zdaj ob pojavu action vsi podatki za slice state.products posodabljali z reducerjem productsReducer.

Zdaj lahko zaženete aplikacijo (opazite, da je v konzoli izginilo opozorilo o neveljavnem reducerju!), odprete Redux DevTools v brskalniku in raziskujete njegove zavihke. Na primer, če kliknete na zavihek State v zavihku Inspector lahko vidimo naša dva objekta s produkti, ki sta se izpisala kot začetna vrednost stanja ob prvem zagonu aplikacije. Na zavihku Log monitor vidimo katere slice ima globalno stanje - to je slice products, ki vključuje dva objekta. Poglejte tudi na zavihek Chart.

Odprite vašo aplikacijo s študenti in spremenite kodo datoteke store.js, kot je prikazano v lekciji.

Zaženite v brskalniku vašo aplikacijo in raziskujte zavihke razširitve Redux DevTools.