Reducera pievienošana Redux lietotnei

Iepriekšējā nodarbībā mēs izveidojām komponentu UserReaction, lai katram produktam būtu arī lietotāju reakcijas. Tagad mums ir jāuzraksta reducers, kas apstrādās reakciju skaitītāju kad lietotājs noklikšķina uz vienas vai otras reakcijas pogas.

Atvērsim mūsu produktu lietotni, un tajā failu productsSlice.js ar visiem reduceriem. Tagad īpašumā reducers izveidosim vēl vienu reduceri reactionClicked (varam to ievietot pirmo - pirms productAdded, lai gan tam nav nozīmes). Kā parasti, nodosim tai parametrus state un action:

reactionClicked(state, action) {},

Un tagad figūriekavu iekšienē, kuras mēs atstājām tukšas iepriekšējā solī, uzrakstīsim tam kodu. Pirmkārt mēs izvilksim produkta id no payload objekta action un reakcijas nosaukumu:

const { productId, reaction } = action.payload

Pēc tam no padotā state iegūsim vajadzīgo produktu:

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

Un ja tāds produkts ir, tad palielināsim padotās reakcijas vērtību par 1:

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

Lūk arī viss, mūsu kods reactionClicked ir gatavs:

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

Beigās failā pievienosim eksportu iegūtajam action creator:

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

Šeit jāatzīmē divi svarīgi punkti. Kā jūs atceraties no iepriekšējām nodarbībām - atjaunināt šādi tieši vērtību reducera kodā nav atļauts (paskatieties uz šo rindu: reactions[reaction]++), bet mums tas tiks piedots, jo mēs to darām createSlice iekšienē, kas izmanto Immer bibliotēku. Tā parūpēsies, lai pārveidotu mūsu kodu par "drošu" vērtības atjaunināšanu. Tas ļauj mums rakstīt sarežģītas lietas vienkāršākā veidā.

Nākamais, kas jāatceras - objekts action jāsatur minimāli iespējamo informācijas daudzumu - tikai tik, lai norādītu, kas noticis. Tajā nevajadzētu veikt nekādus aprēķinus. Visus aprēķinus state atjaunināšanai vajadzētu veikt reducerī, šeit var uzrakstīt tik daudz loģikas, cik nepieciešams.

Atveriet savu studentu lietotni un failā studentsSlice.js pievienojiet vēl vienu reduceri voteClicked laukā reducers, kā parādīts nodarbībā. Uzrakstiet kodu tam. Jūsu reducera uzdevums - noklikšķinot palielināt vērtību vote (vai balss), uz kuras noklikšķināja, attiecīgajam studentam, par 1.

Faila beigās neaizmirstiet eksportēt iegūto action creator voteClicked.