Redux-тегі редьюсерлер

Алдыңғы сабақта біз createSlice функциясын қолданып, products өнімдері үшін слайс және store-да сақталатын осы слайсты жаңартатын редьюсер жасадық. Тағы еске сала кетейін, Redux-те стейт деректері редьюсерлер арқылы өзгертіледі.

Редьюсерлерге бірқатар шектеулер қойылатынын есте сақтау керек. Редьюсер жай ғана алынған қазіргі стейт пен action объектісінің мәндері негізінде күйді жаңартады, содан кейін стейтті қалай өзгерту керектігін шешеді және оның жаңа мәнін қайтарады.

Біз JavaScript-те объектілер мен массивтердің әдепкі бойынша мутабельді (өзгермелі) екенін білеміз. Сонымен қатар, state-ті тікелей өзгертуге болмайтынын білеміз, бұл жағдайда тек көшірмелермен жұмыс істеу керек. Редьюсер де осы ережеге бағынуы керек. Бірақ мұндай логиканы қолмен жазу өте шаршататын және күрделі болуы мүмкін, және мұнда createSlice функциясы көмекке келеді, ол сіздің 'мутабельді' кодыңызды 'немутабельді' көшірмеге айналдыратын Immer кітапханасын қолданады. Осылайша, тек createSlice немесе createReducer функцияларын қолданған кезде ғана "күнә жасап" өмірді жеңілдетуге болады.

Редьюсердің шектеулеріне асинхронды логиканы қолдану, кездейсоқ мәндерді есептеу және басқа "қосымша әсерлерді" орындау кіреді. Енді редьюсермен жақынырақ танысып, өнімдерімізбен қосымшамызға оралайық.

Біздің қосымшамызда алдыңғы сабақтарда жасаған store бар, бірақ ол әлі ештеңеден бос. store.js файлымызды ашып, оған аздап код қосамыз. Алдымен оған өнімдер үшін reducer функциясын импорттаймыз:

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

Енді редьюсер ретінде біз импортталған productsReducer функциясын көрсете аламыз:

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

Жоғарыда көрсетілген жолымен біз store-ғ мынаны айтамыз: ендер action туындаған кезде, state.products слайсы үшін барлық деректер productsReducer редьюсері арқылы жаңартылады.

Енді сіз қосымшаны іске қоса аласыз (консольдегі редьюсердің жарамсыз екені туралы ескерту жоғалғанын байқаңыз!), браузердегі Redux DevTools-ты ашып, оның қойындыларымен қарап шығуыңызға болады. Мысалы, Inspector бөліміндегі State қойындысын басу арқылы біз қосымшаны бірінші рет іске қосқан кезде стейттің бастапқы мәні ретінде шыққан екі өнім объектісін көре аламыз. Log Monitor қойындысында біз жалпы стейттің қандай слайстарды қамтитынын көреміз - бұл екі объектіні қамтитын products слайсы. Сондай-ақ Chart қойындысына көз салыңыз.

Студенттеріңізбен қосымшаны ашып, store.js файлының кодын сабақта көрсетілгендей етіп өзгертіңіз.

Қосымшаңызды браузерде іске қосыңыз және Redux DevTools кеңейтімінің қойындыларымен танысыңыз.