Redux барномаа редюсер илова кардан

Дар дарси гузашта мо компоненти UserReaction сохтем, то ба ҳар як маҳсул инчунин реаксияҳои корбар дошта бошад. Акнун ба мо редюсер навиштан лозим аст, ки ҳисобкунаки реаксияҳоро дар вақти клики корбар дар тугмаи ин ё он реаксия коркард мекунад.

Биёед барномаи маҳсулоти худро кушоем, ва дар он файли productsSlice.js бо ҳамаи редюсерҳо. Акнун дар хосияти reducers редюсери дигари reactionClicked созем (метавонем онро аввал - пеш аз productAdded гузорем, гарчанде ки фарқе надорад). Ҳамчунин муқаррарӣ, ба он параметрҳои state ва action-ро мегузаронем:

reactionClicked(state, action) {},

Ва акнун дар дохили каҷҳое, ки мо дар қадами гузашта холӣ гузошта будем, барои он код нависем. Аввалан мо id-и маҳсулро аз payload объекти action ва номи реаксияро ҷудо мекунем:

const { productId, reaction } = action.payload

Сипас аз стейти додашуда маҳсули дархостшударо мегирем:

const currentProduct = state.find(product => product.id === productId)

Ва агар чунин маҳсул вуҷуд дошта бошад, пас арзиши реаксияи додашударо ба 1 зиёд мекунем:

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

Ана ҳама, коди мо барои reactionClicked омода аст:

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

Биёед дар охири файл экспорти action creator-и бадастомадаро илова кунем:

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

Дар ин ҷо ду нуқтаи муҳим аст, ки бояд қайд кард. Чунон ки шумо аз дарсҳои гузашта ба ёд доред - навсозӣ кардан ба ин тавр бевосита арзишро дар коди редюсер мумкин нест (ба ин сатр назар кунед: reactions[reaction]++), вале ба мо ин ҷо мувофиқ аст, зеро мо ин корро дар дохили createSlice анҷом медиҳем, ки аз китобхонаи Immer истифода мекунад. Он ҳам хабардор аст, то коди моро ба навсозии "бехатар"и арзиш табдил диҳад. Ин ба мо имкон медиҳад, ки чизҳои мураккабро ба тариқи содатар нависем.

Чизи дигаре, ки бояд ба ёд дошта шавад - объекти action бояд ҳадди ақал миқдори маълумотро дарбар гирад - танҳо барои он ки нишон диҳад чӣ рӯй дод. Дар он ҳеҷ гуна ҳисобкуниро анҷом додан лозим нест. Ҳама ҳисобкуниҳо барои навсозии стейт бояд дар редюсер анҷом дода шаванд, дар ин ҷо шумо метавонед барои ин он қадар мантиқ нависед, ки лозим аст.

Барномаи донишҷӯёни худро кушоед ва дар файли studentsSlice.js редюсери дигари voteClicked-ро ба майдони reducers илова кунед, чунон ки дар дарс нишон дода шуд. Барои он код нависед. Вазифаи редюсери шумо - дар вақти клик арзиши vote (ё овоз), ки бар он клик карда шуд, барои ин донишҷӯ, ба 1 зиёд кардан аст.

Дар охири файл фаромӯш накунед, ки action creator-и бадастомадаи voteClicked-ро экспорт кунед.