Odesílání action v Redux aplikaci

Nyní máme reducer pro aktualizaci slicu s reakcemi. Nyní potřebujeme přidat odesílání action, která bude spuštěna při kliknutí uživatele na tlačítko s reakcí. Ale nejprve, aby vše kompletně fungovalo, musíme provést několik změn.

Otevřeme naši aplikaci s produkty, a v ní soubor productsSlice.js. Podívejte se na definici initialState. Vidíte? V objektech není vlastnost s reakcemi. Pojďme to opravit nastavením čítačů každé z reakcí na 0:

{
	id: '1',
	title: 'Product1',
	desc: 'This is an amazing product',
	price: '300',
	amount: '30',
	reactions: {
		good: 0,
		soso: 0,
		bad: 0,
	},
},

Do druhého objektu pro inicializaci přidejte vlastnost reactions sami. Tuto vlastnost také potřebujeme přidat níže do kodu pro reducer productAdded, aby nové produkty také měly tuto funkcionalitu. Pojďme to udělat pro jeho metodu prepare:

prepare(title, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			title,
			desc,
			price,
			amount,
			seller: sellerId,
			reactions: {
				good: 0,
				soso: 0,
				bad: 0,
			},
		},
	}
},

Nyní přistoupíme k odesílání action. Otevřeme soubor UserReactions.jsx, poté importujme do něj hook useDispatch a reactionClicked:

import { useDispatch } from 'react-redux'
import { reactionClicked } from './productsSlice'

Na začátku kodu v těle funkce UserReactions prvním řádkem (před const userReactions ... ) napíšeme:

const dispatch = useDispatch()

A přidáme na tlačítko reakce odesílání reactionClicked při kliknutí, přičemž nám bude předáváno id produktu a název reakce, na kterou bylo kliknuto:

<button
	key={name}
	type="button"
	className="reaction-button"
	onClick={() =>
		dispatch(reactionClicked({ productId: product.id, reaction: name }))
	}
>
	{image} {product.reactions[name]}
</button>

Nám zbývá nyní vypsat komponent s reakcemi ve verštování pro naše stránky. Udělejme to v souboru ProductsList.jsx před elementem Link:

<UserReactions product={product} />

A přesně tak také před elementem Link na stránce produktu v souboru ProductPage.jsx:

<UserReactions product={product} />

Nyní, když vše zapadlo na své místo, můžeme spustit naši aplikaci. Zkusme klikat na tlačítka s reakcemi. Můžeme přidat nový produkt a také na ně klikat. Nyní, kdekoliv klikneme na tlačítka s reakcemi, změněné hodnoty se budou zobrazovat pro daný produkt na všech stránkách. Podívejte se na stránku jednotlivého produktu (na které jste klikali na reakce) a stránku s jejich seznamem a naopak, pro všechny stránky bude počet reakcí pro konkrétní produkt stejný.

Tato lekce byla závěrečná v kapitole o práci s daty v Reduxu. Hlouběji jsme pracovali s daty v Redux store a nyní víme, jak přidávat potřebnou funkcionalitu do aplikace a používat data v React komponentech.

Otevřete vaši aplikaci se studenty. V souboru studensSlice.js objektům pro inicializaci přidejte vlastnost votes s odpovídajícími poli. Udělejte to i pro reducer studentAdded.

Uvnitř funkce UserVotes v souboru UserVotes.jsx založte dispatch pro hook useDispatch a proveďte odeslání action voteClicked při kliku na tlačítka hlasování, předejte mu id studenta a název vote, podobně jako je ukázáno v lekci.

Vypište tlačítka pro hlasování ve verštování pro komponenty StudentsList a StudentPage.