Redux колдонмосуна редьюсер кошуу

Өткөн сабакта биз ар бир продукт үчүн колдонуучу реакциялары болушу үчүн UserReaction компонентин түзгөнбүз. Эми биз редьюсер жазышыбыз керек, ал колдонуучу каалаган реакциянын баскычына чыкылдатканда реакциялар эсептегичин иштетет.

Келгиле, биздин продукттар колдонмобузду ачып, анын ичиндеги бардык редьюсерлер бар productsSlice.js файлын ачалы. Азыр reducers касибинде дагы бир редьюсер reactionClicked түзөбүз (аны биринчи - productAddedдан мурун коё алабыз, бирок бул маанилүү эмес). Кадылдай эле, ага параметрлер катары state жана action беребиз:

reactionClicked(state, action) {},

Эми биз мурунку кадамда бош калтырган айры ичине, анын үчүн код жазабыз. Биринчиден, биз продукттун id-син action объектисинин payloadинен жана реакциянын атын алабыз:

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ге көбөйтүү.

Файлдын аягында алынган action creator voteClicked экспорттоону унутпаңыз.