Reduceri u Redux-u

Na prethodnoj lekciji smo pomoću funkcije createSlice kreirali slice za proizvode products i reducer koji će ažurirati ovaj slice, koji se čuva u store-u. Još jednom podsećam, da se u Redux-u podaci stanja menjaju pomoću reducera.

Treba imati na umu da se na reducere nameće niž ograničenja. Reducer ažurira stanje samo na osnovu dobijenih vrednosti trenutnog stanja i objekta action, a zatim odlučuje, kako da promeni stanje i vraća njegovu novu vrednost.

Znamo da su podrazumevano objekti i nizovi u JavaScript-u mutabilni (promenljivi). Takođe znamo da se stanje ne sme direktno menjati, u takvim slučajevima treba raditi samo sa kopijama. Ovom pravilu se mora pokoravati i reducer. Ali ručno pisanje takve logike može biti prilično zamorno i složeno, i ovde u pomoć dolazi funkcija createSlice, koja koristi biblioteku Immer, koja transformiše vaš 'mutabilni' kod u 'nemutabilni'. Na taj način, grešiti i pojednostavljivati život možete samo pri korišćenju funkcija createSlice ili createReducer.

U ograničenja reducera spada takođe korišćenje asinhrone logike, izračunavanje slučajnih vrednosti i izvršavanje drugih "sporednih efekata". A sada, nakon što smo se upoznali sa reducerom izbliza, vratimo se našoj aplikaciji sa proizvodima.

U našoj aplikaciji postoji store, koji smo kreirali u prethodnim lekcijama, ali za sada u njemu nema ničega. Hajde da otvorimo naš fajl store.js i dodamo u njega malo koda. Za početak importujmo u njega funkciju reducera za proizvode:

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

Sada kao reducer možemo navedemo importovanu funkciju productsReducer:

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

Gorenavedenom linijom govorimo našem store-u da sada pri nastanku action-a svi podaci za slice state.products će biti ažurirani reducerom productsReducer.

Sada možete pokrenuti aplikaciju (primetite, da je iz konzole nestalo upozorenje o nevalidnom reduceru!), otvoriti Redux DevTools u browser-u i proći kroz njegove kartice. Na primer, klikom na karticu State u kartici Inspector možemo videti naša dva objekta sa proizvodima, koji su se prikazali kao početna vrednost stanja pri prvom pokretanju aplikacije. Na kartici Log monitor vidimo koje slice-ove ima globalno stanje - to je slice products, koji uključuje dva objekta. Takođe pogledajte karticu Chart.

Otvorite vašu aplikaciju sa studentima i izmenite kod fajla store.js, kako je prikazano u lekciji.

Pokrenite u browser-u vašu aplikaciju i prođite kroz kartice ekstenzije Redux DevTools.