Přidání reduktoru do Redux aplikace

V minulé lekci jsme vytvořili komponent UserReaction, aby každý produkt měl také reakce uživatelů. Nyní potřebujeme napsat reduktor, který bude zpracovávat čítač reakcí při kliknutí uživatele na tlačítko té či oné reakce.

Pojďme otevřít naši aplikaci s produkty, a v ní soubor productsSlice.js se všemi reduktory. Nyní ve vlastnosti reducers vytvoříme další reduktor reactionClicked (můžeme jej umístit první - před productAdded, ačkoliv na tom nezáleží). Jako obvykle mu předáme parametry state a action:

reactionClicked(state, action) {},

A nyní uvnitř složených závorek, které jsme nechali prázdné v předchozím kroku, napíšeme pro něj kód. Za prvé extrahujeme id produktu z payload objektu action a název reakce:

const { productId, reaction } = action.payload

Poté z předaného stavu získáme požadovaný produkt:

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

A pokud takový produkt existuje, zvýšíme hodnotu předané reakce o 1:

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

To je vše, náš kód pro reactionClicked je hotov:

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

Pojďme na konec souboru přidat export vytvořeného action creatoru:

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

Zde je třeba poznamenat dva důležité body. Jak si pamatujete z předchozích lekcí - aktualizovat takto přímo hodnotu v kódu reduktoru nelze (podívejte se na tento řádek: reactions[reaction]++), ale nám to projde, protože to děláme uvnitř createSlice, který používá knihovnu Immer. Ta se postará o to, aby přetvořila náš kód na "bezpečnou" aktualizaci hodnoty. To nám umožňuje psát složité věci jednodušším způsobem.

Dále je třeba pamatovat - objekt action by měl obsahovat minimálně možné množství informací - pouze tolik, aby ukázal, co se stalo. Neměly by se v něm provádět žádné výpočty. Všechny výpočty pro aktualizaci stavu by se měly provádět v reduktoru, zde můžete pro tento účel napsat tolik logiky, kolik je potřeba.

Otevřete vaši aplikaci se studenty a v souboru studentsSlice.js přidejte další reduktor voteClicked do pole reducers, jak je ukázáno v lekci. Napište pro něj kód. Úkolem vašeho reduktoru je při kliknutí zvýšit hodnotu vote (neboli hlasu), na který bylo kliknuto, pro daného studenta, o 1.

Na konci souboru nezapomeňte exportovat vytvořený action creator voteClicked.