Reduks-da Reduserlar

Kecen dersde biz createSlice funksiyasi vasitesile products ucun bir slice ve store-da saxlanilan bu slice-i yenileyecek bir reduser yaratmisiq. Bir daha xatirladim ki, Reduks-da state melumatlari reduserler vasitesile deyisir.

Yadda saxlamaliyiq ki, reduserlere bir sira mehdudiyyetler qoyulur. Reduser yalniz elde olunan cari state ve action obyektinin deyerleri esasinda state-i yenileyir, sonra ise state-i nece deyismek ve onun yeni deyerini qaytarmaq barada qerar verir.

Biz bilirik ki, standart olaraq JavaScript-de obyektler ve massivler mutabeldir (deyise bilen). Eyni zamanda bilirik ki, state-i birbasa deyismek olmaz, bele halda yalniz kopyalarla islemek lazimdir. Bu qaydaya reduser de tabee olmalidir. Amma bu cür mentiqi el ile yazmaq olduqca yorucu ve cetin ola biler ve burada createSlice funksiyasi komeye gelir, hansi ki, sizin 'mutabel' kodunuzu 'immutabel'-e ceviren Immer kitabxanasindan istifade edir. Beləliklə, günah etmək və həyatı sadələşdirmək yalnız createSlice və ya createReducer funksiyalarından istifadə edərkən mümkündür.

Reduserin mehdudiyyetlerine asinxron mentiq, tesadufi deyerlerin hesablanmasi ve basqa "yan effektler" icra edilmesi de daxildir. Indi ise reduserle daha yaxindan tanis olduqdan sonra, mehsullarla olan proqramimiza qayidaq.

Proqramimizda kecen derslerde yaratdigimiz store var, amma hele orada hec ne yoxdur. Gelin store.js faylimizi aciq ve ona bir az kod elave edek. Evvela ona mehsullar ucun reducer funksiyasini import edek:

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

Indi reducer kimi import etdiyimiz productsReducer funksiyasini gostere bilerik:

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

Yuxaridaki setirle store-a deyirik ki, indi bir action bas verdikde state.products slice-i ucun butun melumatlar productsReducer reduseri terefinden yenilenecek.

Indi siz proqrami ise sala bilersiniz (qeyd edin ki, konsolda etibarsiz reducer xeberdarligi yox oldu!), brauzerde Redux DevTools-u aciq ve onun sekmelerinde gezine bilersiniz. Meselen, Inspector sektmesindeki State sektmesini basanda, proqram ilk defe ise dusende ilkin state deyeri kimi cixan iki mehsul obyektimizi gore bilerik. Log monitor sektmesinde ise qlobal state-in icinde hansi slice-larin oldugunu gorurik - bu, iki obyekt daxil olan products slice-dir. Hemcinin Chart sektmesine de baxin.

Telebelerle olan proqraminizi aciq ve store.js faylinin kodunu derste gosterildiyi kimi deyisin.

Proqraminizi brauzerde ise salin ve Redux DevTools uzantilisinin sekmelerinde gezinin.