Reducers дар 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-ро дар браузер кушоед ва дар варақаҳои он гардиш кунед. Масалан, бо пахш кардан ба варақаи State дар варақаи Inspector мо ду объекти маҳсулоти худро мебинем, ки ҳамчун қимати ибтидоии стейт дар оғози коркарди барнома хориҷ шуданд. Дар варақаи Log monitor мо мебинем, ки стейти глобалӣ кадом слайсҳоро дар худ дорад - ин слайси products аст, ки ду объектро дар бар мегирад. Ҳамчунин ба варақаи Chart сар зада бинед.

Барномаи худро бо донишҷӯён кушоед ва рамзи фаили store.js-ро тавре тағйир диҳед, ки дар дарс нишон дода шуд.

Барномаи худро дар браузер оғоз кунед ва дар варақаҳои васеъшавии Redux DevTools гардиш кунед.