Redux ilovasiga reducer qo'shish

O'tgan darsda biz har bir mahsulotga foydalanuvchi reaktsiyalari bo'lishi uchun UserReaction komponentini yaratdik. Endi foydalanuvchi qaysidir reaktsiya tugmasini bosganda reaktsiya hisoblagichini boshqaradigan reducerni yozishimiz kerak.

Keling, mahsulotlar ilovamizni ochaylik, undagi productsSlice.js faylini barcha reducerlar bilan. Endi reducers xususiyatida yana bir reducer reactionClicked yaratamiz (uni birinchi o'ringa - productAdded dan oldin qo'yishimiz mumkin, garchi bu ahamiyatsiz). Odatiy kabi, unga state va action parametrlarini uzatamiz:

reactionClicked(state, action) {},

Endi oldingi qadamda bo'sh qoldirgan jingalak qavslar ichiga uning uchun kod yozamiz. Birinchidan, mahsulot id sini action ob'ektining payload dan va reaktsiya nomini olamiz:

const { productId, reaction } = action.payload

Keyin berilgan statedan kerakli mahsulotni olamiz:

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

Va agar bunday mahsulot mavjud bo'lsa, berilgan reaktsiya qiymatini 1 ga oshiramiz:

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

Hammasi shu, bizning reactionClicked uchun kod tayyor:

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

Keling, fayl oxirida yaratilgan action creatorni eksport qilamiz:

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

Bu yerda ikkita muhim nuqtani ta'kidlash kerak. Siz oldingi darslardan eslaysiz - reducer kodida qiymatni to'g'ridan-to'g'ri shunday yangilash mumkin emas (ushbu qatorga qarang: reactions[reaction]++), lekin biz bunga yo'l qo'yamiz, chunki biz buni createSlice ichida qilmoqdamiz, u esa Immer kutubxonasidan foydalanadi. U bizning kodimizni qiymatni "xavfsiz" yangilashga aylantirish uchun g'amxo'rlik qiladi. Bu bizga murakkab narsalarni oddiyroq usulda yozish imkonini beradi.

Yodda tutish kerak bo'lgan keyingi narsa - action ob'ekti minimal mumkin bo'lgan ma'lumotni o'z ichiga olishi kerak - faqat nima sodir bo'lganligini ko'rsatish uchun. Unda hech qanday hisob-kitob qilish shart emas. State yangilash uchun barcha hisob-kitoblar reducerda amalga oshirilishi kerak, buning uchun qancha mantiq kerak bo'lsa, shuncha yozish mumkin.

Talabalar ilovingizni oching va studentsSlice.js faylida reducers maydoniga darsda ko'rsatilgandek yana bir reducer voteClicked qo'shing. Uning uchun kod yozing. Sizning reducer vazifangiz - bosilgan vote (yoki ovoz) qiymatini ushbu talaba uchun 1 ga oshirish.

Fayl oxirida yaratilgan voteClicked action creatorni eksport qilishni unutmang.