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]++), лекин бизга бу жоиз, чунки биз уни createSlice ичида қиляпмиз, у эса Immer кутубхонасидан фойдаланади. У эса бизнинг кодимизни "хавфсиз" қиймат янгилашга ўзгартириш билан шуғулланади. Бу бизга мураккаб нарсаларни соддароқ усулда ёзиш имконини беради.

Кейинги эслатиш - action объекти энг кам миқдордаги маълумотни ўз ичига олиши керак - фақат нима бўлганини кўрсатиш учун. Унда ҳеч қандай ҳисоб-китоблар қилиш шарт эмас. Стейтни янгилаш учун барча ҳисоб-китоблар редюсерда бажарилиши керак, бу ерда бунга қанча мантик керак бўлса, шунча ёзишингиз мумкин.

Ўқувчилар билан иловангизни очинг ва studentsSlice.js файлида reducers майдонига яна бир voteClicked редюсерини қўшинг, дарсда кўрсатилганидек. Унга код ёзинг. Сизнинг редюсерингизнинг вазифаси - босилганда, vote (ёки овоз) қийматини 1 га ошириш.

Файл охирида олинган voteClicked action creator ни экспорт қилишни унутмангиз.