Redux қолданбасына редьюсерді қосу

Алдыңғы сабақта біз әрбір өнімде пайдаланушы реакциялары болуы үшін UserReaction компонентін жасадық. Енді пайдаланушы реакция түймесін басқанда реакция санағышын өңдейтін редьюсерді жазуымыз керек.

Өнімдеріміз бар қолданбамызды ашып, ондағы барлық редьюсерлері бар productsSlice.js файлын ашайық. Енді reducers қасиетінде тағы бір reactionClicked редьюсерін жасайық (оны бірінші орынға - productAdded-ден бұрын қоя аламыз, бірақ бұл маңызды емес). Әдеттегідей, оған state және action параметрлерін береміз:

reactionClicked(state, action) {},

Енді алдыңғы қадамда бос қалдырған бұйра жақшалардың ішінде оған код жазайық. Біріншіден, біз action объектісінің payload-ынан өнімнің id-сін және реакция атауын шығарамыз:

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]++), бірақ бізге бұл жарайды, себебі біз мұны Immer кітапханасын қолданатын createSlice ішінде жасаймыз. Біздің кодты мәнді "қауіпсіз" жаңартуға қайта жасауға дәл сол қамқорлық жасайды. Бұл бізге күрделі нәрселерді қарапайым тәсілмен жазуға мүмкіндік береді.

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

Студенттеріңіз бар қолданбаны ашып, studentsSlice.js файлында сабақта көрсетілгендей reducers өрісіне тағы бір voteClicked редьюсерін қосыңыз. Оған код жазыңыз. Сіздің редьюсеріңіздің міндеті - басылған vote (немесе дауыс) мәнін осы студент үшін 1-ге көбейту.

Файлдың соңында алынған voteClicked action creator-ін экспорттауды ұмытпаңыз.