Redux aplikasiýanyňyzda reducer goşmak

Öňki sapakda her bir önüm üçin ulanyjy reaksiýalary bolmagy üçin UserReaction komponentini döretdik. Indi biz ulanyjyň haýsy bir düwmä basanynda reaksiýa sanagyny işleýän reducer ýazmaly.

Geliň, önümlerimiz bilen aplikasiýamyzy açalyň, we onuň içindäki ähli reducerleri saklaýan productsSlice.js faýlyny açalyň. Indi reducers aýratynlygynda ýene bir reducer reactionClicked dörediň (ony birinjide goýup bileris - productAdded-den öň, ýöne bu tapawudy ýok). Adaty ýaly, ona state we action parametrlerini beriň:

reactionClicked(state, action) {},

Indi bolsa öňki ädimde boş goýan gygyrwuly äýjegimiziň içinde onuň üçin kody ýazalyň. Birinjiden, biz action objektiň payload böleginden önümiň id-sini we reaksiýanyň adyny aýryp alarys:

const { productId, reaction } = action.payload

Soňra berilen state-den zerur önümi alyp alarys:

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

Eger şeýle önüm bar bolsa, berlen reaksiýanyň bahasyny 1 artdyrarys:

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

Bolýar, bizim reactionClicked üçin kod taýýar:

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

Geliň faýlyň ahyrynda alnan action creator-i eksport edeliň:

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

Bu ýerde iki möhüm nokady belläp geçmeli. Öňki sapaklardan ýadyňyzda bolşy ýaly - reducer kodunda bahany şeýle beýleki goýberip täzelen driw etmek bolmaýar (şu setire serediň: reactions[reaction]++), ýöne biz munuň üstünden ýöreris, sebäbi biz muny Immer kitaphanasyny ulanýan createSlice içinde edýäris. Ol bizim kodymyzy bahany "howpsuz" täzelemäge öwürmegi üpjün eder. Bu çylşyrymly zatlary has ýönekeý usulda ýazmagymyza mümkinçilik berýär.

Ýatda saklamaly indiki zat - action objekti iň pes mümkin bolan maglumaty öz içine almaly - diňe nämäniň boldygyny görkezmek üçin gerek bolan. Onda haýsydyr bir hasaplamalary etmek ýaramaz. State-i täzelemek üçin ähli hasaplamalar reducerde edilmeli, buna üçin bu ýerde nähili logika gerek bolsa şonça ýazyp bilersiňiz.

Talyplyr bilen aplikasiýaňyzy açyň we studentsSlice.js faýlynda sapakda görkezilişi ýaly ýene bir reducer voteClicked goşuň reducers meýdanyna. Ona kod ýazyň. Siziň reduceriňiziň wezipesi - bir basylyşda degişli talyp üçin basylan vote (ýa-da ses) bahasyny 1 artdyrmak.

Faýlyň ahyrynda alnan action creator voteClicked eksport etmegi ýatdan çykarmaň.