Reducery v Reduxe

Na minulej lekcii sme pomocou funkcie createSlice vytvorili slice pre produkty products a reducer, ktorý bude aktualizovať tento slice uložený v store. Ešte raz pripomínam, že v Reduxe sa dáta stavu menia pomocou reducerov.

Treba pamätať, že na reducery sa vzťahuje rad obmedzení. Reducer aktualizuje stav iba na základe prijatých hodnôt aktuálneho stavu a objektu action, a potom sa rozhodne, ako zmeniť stav a vráti jeho novú hodnotu.

Vieme, že štandardne sú objekty a polia v JavaScripte mutable (zmeniteľné). Tiež vieme, že state nemožno meniť priamo, v takom prípade treba pracovať len s kópiami. Tomu musí vyhovieť aj reducer. Ale písanie takejto logiky manuálne môže byť celkom únavné a zložité, a tu prichádza na pomoc funkcia createSlice, ktorá používa knižnicu Immer, transformujúci váš 'mutable' kód na 'immutable'. Týmto spôsobom môžete 'hrešiť' a zjednodušovať život len pri použití funkcií createSlice alebo createReducer.

Medzi obmedzenia reducera patrí aj používanie asynchrónnej logiky, výpočet náhodných hodnôt a vykonávanie iných "vedľajších efektov". A teraz, keď sme sa zblížili s reducerom, vráťme sa k našej aplikácii s produktmi.

V našej aplikácii je store, ktorý sme vytvorili v predchádzajúcich lekciách, ale zatiaľ v ňom nič nie je. Otvorme náš súbor store.js a pridajme do neho trochu kódu. Na začiatok importujme do neho funkciu reducer pre produkty:

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

Teraz ako reducer môžeme zadať importovanú funkciu productsReducer:

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

Uvedeným riadkom hovoríme nášmu store, že teraz pri vzniku action všetky dáta pre slice state.products budú aktualizované reducerom productsReducer.

Teraz môžete spustiť aplikáciu (všimnite si, že v konzole zmizlo varovanie o neplatnom reduceri!), otvorte Redux DevTools v prehliadači a prehľadajte jeho karty. Napríklad, kliknutím na kartu State v karte Inspector môžeme vidieť naše dva objekty s produktmi, ktoré sa zobrazili ako počiatočná hodnota stavu pri prvom spustení aplikácie. Na karte Log monitor vidíme, aké slice má v sebe globálny stav - je to slice products, vrátane dvoch objektov. Tiež sa pozrite na kartu Chart.

Otvorte vašu aplikáciu so študentmi a zmeňte kód súboru store.js, ako je ukázané v lekcii.

Spustite v prehliadači vašu aplikáciu a prehľadajte karty rozšírenia Redux DevTools.