Pridanie reduktora do Redux aplikácie

V minulej lekcii sme vytvorili komponent UserReaction aby mal každý produkt aj používateľské reakcie. Teraz potrebujeme napísať reduktor, ktorý bude spracovávať počítadlo reakcií pri kliknutí používateľom na tlačidlo tej alebo inej reakcie.

Otvorme našu aplikáciu s produktmi, a v nej súbor productsSlice.js so všetkými reduktormi. Teraz vo vlastnosti reducers vytvoríme ďalší reduktor reactionClicked (môžeme ho umiestniť prvý - pred productAdded, aj keď to nie je dôležité). Ako obvykle, predáme mu parametre state a action:

reactionClicked(state, action) {},

A teraz vo vnútri zložených zátvoriek, ktoré sme nechali prázdne v predchádzajúcom kroku, napíšeme pre neho kód. Po prvé, extrahujeme id produktu z payload objektu action a názov reakcie:

const { productId, reaction } = action.payload

Potom z predaného stavu získame potrebný produkt:

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

A ak taký produkt existuje, zvýšime hodnotu predanej reakcie o 1:

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

To je všetko, náš kód pre reactionClicked je pripravený:

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

Nakoniec v súbore pridajme export vytvoreného action creator:

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

Tu je potrebné poznamenať dve dôležité veci. Ako si pamätáte z predchádzajúcich lekcií - aktualizovať hodnotu priamo takýmto spôsobom v kóde reduktora nie je možné (pozrite sa na tento riadok: reactions[reaction]++), ale nám to prejde, pretože to robíme vo vnútri createSlice, ktorý používa knižnicu Immer. Tá sa postará o to, aby pretransformovala náš kód na "bezpečnú" aktualizáciu hodnoty. To nám umožňuje písať zložité veci jednoduchším spôsobom.

Ďalšia vec, ktorú je potrebné mať na pamäti - objekt action by mal obsahovať čo najmenšie možné množstvo informácií - len toľko, aby určil, čo sa stalo. Nemali by sa v ňom vykonávať žiadne výpočty. Všetky výpočty pre aktualizáciu stavu by sa mali robiť v reduktore, tu môžete na to napísať toľko logiky, koľko je potrebné.

Otvorte svoju aplikáciu so študentmi a v súbore studentsSlice.js pridajte ďalší reduktor voteClicked do poľa reducers, ako je ukázané v lekcii. Napíšte pre neho kód. Úloha vášho reduktora - pri kliknutí zvýšiť hodnotu vote (alebo hlasu), na ktorý sa kliklo, pre daného študenta, o 1.

Na konci súboru nezabudnite exportovať vytvorený action creator voteClicked.