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 кеңейтмесинин вкладкалары менен сүзүңүз.