Shtimi i një Reducer në Aplikacionin Redux

Në mësimin e kaluar krijuam komponentin UserReaction në mënyrë që çdo produkt të ketë edhe reaksione të përdoruesve. Tani duhet të shkruajmë një reducer që do të trajtojë numëruesin e reaksioneve kur përdoruesi klikon në butonin e një reaksioni të caktuar.

Le të hapim aplikacionin tonë me produktet, dhe në të skedarin productsSlice.js me të gjitha reducer-at. Tani në vetinë reducers le të krijojmë një reducer tjetër reactionClicked (mund ta vendosim të parën - para productAdded, edhe pse kjo nuk ka rëndësi). Si zakonisht, le t'i kalojmë atij si parametra state dhe action:

reactionClicked(state, action) {},

Tani brenda kllapave kaçurrelë, të cilat i lamë bosh në hapin e mëparshëm, le të shkruajmë kodin për të. Së pari do të nxjerrim id e produktit nga payload i objektit action dhe emrin e reaksionit:

const { productId, reaction } = action.payload

Pastaj nga state i kaluar do të marrim produktin e nevojshëm:

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

Dhe nëse ekziston një produkt i tillë, atëherë do të rrisim vlerën e reaksionit të kaluar me 1:

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

Kjo është e gjitha, kodi ynë për reactionClicked është gati:

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

Në fund të skedarit le të shtojmë eksportin e krijuesit të veprimit (action creator) të përftuar:

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

Këtu duhet theksuar dy pika të rëndësishme. Siç e mbani mend nga mësimet e mëparshme - përditësimi i vlerës direkt në këtë mënyrë në kodin e reducer nuk lejohet (shikoni këtë rresht: reactions[reaction]++), por ne do ta bëjmë këtë, sepse e bëjmë brenda createSlice, i cili përdor bibliotekën Immer. Ajo do të kujdeset që të transformojë kodin tonë në një përditësim "të sigurt" të vlerës. Kjo na lejon të shkruajmë gjëra komplekse në një mënyrë më të thjeshtë.

Gjëja tjetër që duhet mbajtur mend - objekti action duhet të përmbajë sasinë minimale të mundshme të informacionit - vetëm atë që tregon se çfarë ka ndodhur. Nuk duhet të bëhen në të ndonjë llogaritje. Të gjitha llogaritjet për përditësimin e state duhet të bëhen në reducer, këtu mund të shkruani aq logjikë sa të nevojitet për këtë.

Hapni aplikacionin tuaj me studentët dhe në skedarin studentsSlice.js shtoni edhe një reducer voteClicked në fushën reducers, siç tregohet në mësim. Shkruani kodin për të. Detyra e reducer-it tuaj - kur klikohet, të rritë vlerën e vote (ose votës), mbi të cilën është klikuar, për atë student, me 1.

Në fund të skedarit mos harroni të eksportoni krijuesin e veprimit (action creator) të përftuar voteClicked.