Reduktuesit në Redux

Në mësimin e kaluar, me ndihmën e funksionit createSlice krijuam një slice për produktet products dhe një reduktues që do të azhurnonte këtë slice, i cili ruhet në store. Ju kujtoj edhe një herë, se në Redux të dhënat e gjendjes ndryshohen me ndihmën e reduktuesve.

Duhet mbajtur mend se reduktuesve u vendosen një sërë kufizimesh. Reduktuesi azhurnon gjendjen vetëm në bazë të vlerave të marra të gjendjes aktuale dhe objektit action, dhe pastaj vendos, si të ndryshojë gjendjen dhe kthen vlerën e saj të re.

Ne e dimë se si parazgjedhje, objektet dhe vargjet në JavaScript janë të ndryshueshme (mutabile). Gjithashtu ne e dimë se gjendjen state nuk duhet ndryshuar drejtpërdrejt, në këtë rast duhet punuar vetëm me kopje. Ky rregull duhet të ndiqet edhe nga reduktuesi. Por shkrimi i një logjike të tillë me dorë mund të jetë mjaft i lodhshëm dhe i vështirë, dhe këtu në ndihmë vjen funksioni createSlice, i cili përdor bibliotekën Immer, e cila shndërron kodin tuaj 'të ndryshueshëm' në 'të pandryshueshëm'. Kështu, mund të 'mëkatohet' dhe të thjeshtohet jeta vetëm kur përdoren funksionet createSlice ose createReducer.

Gjithashtu, në kufizimet e reduktuesit përfshihet përdorimi i logjikës asinkrone, llogaritja e vlerave të rastësishme dhe kryerja e efekteve tjerë "anësore". Tani, pasi u njohëm më afër me reduktuesin, le të kthehemi te aplikacioni ynë me produkte.

Në aplikacionin tonë ekziston një store, të cilin e krijuam në mësimet e mëparshme, por deri tani nuk ka asgjë në të. Le të hapim skedarin tonë store.js dhe t'i shtojmë pak kod. Për fillim, le të importojmë në të funksionin reduktues për produktet:

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

Tani si reduktues mund të përcaktojmë funksionin e importuar productsReducer:

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

Me rreshtin e mësipërm ne i tregojmë store-it tonë, që tani kur ndodh një action të gjitha të dhënat për slice-in state.products do të azhurnohen nga reduktuesi productsReducer.

Tani mund të nisni aplikacionin (vini re, që në konsol u zhduk paralajmërimi për reduktues të pavlefshëm!), të hapni Redux DevTools në shfletues dhe të eksploroni nëpër skedat e tij. Për shembull, duke klikuar në skedën State në skedën Inspector ne mund të shohim dy objektet tona me produkte, të cilat u shfaqën si vlera fillestare e gjendjes kur u nis aplikacioni për herë të parë. Në skedën Log monitor ne shohim se çfarë slice-a përmban në vete gjendja globale - ky është slice-i products, që përfshin dy objekte. Gjithashtu hidhini një sy skedës Chart.

Hapni aplikacionin tuaj me studentë dhe ndryshoni kodin e skedarit store.js, ashtu siç tregohet në mësim.

Nisni në shfletues aplikacionin tuaj dhe eksploroni nëpër skedat e shtojcës Redux DevTools.