Wysyłanie akcji w aplikacji Redux

Teraz mamy reducer do aktualizacji składu (slice) z reakcjami. Obecnie musimy dodać wysyłanie akcji, która będzie wyzwalana po kliknięciu przez użytkownika przycisku z reakcją. Ale najpierw, aby wszystko działało poprawnie, musimy wprowadzić kilka zmian.

Otwórzmy naszą aplikację z produktami, a w niej plik productsSlice.js. Spójrz na definicję initialState. Widzisz? W obiektach nie ma właściwości z reakcjami. Naprawmy to, ustawiając liczniki każdej z reakcji na 0:

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

Do drugiego obiektu inicjalizującego dodaj właściwość reactions samodzielnie. Tę samą właściwość musimy dodać poniżej w kodzie dla reducera productAdded, aby nowe produkty również miały tę funkcjonalność. Zróbmy to dla jego metody prepare:

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

Teraz przejdźmy do wysyłania akcji. Otwórzmy plik UserReactions.jsx, następnie zaimportujmy do niego hook useDispatch i reactionClicked:

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

Na początku kodu w ciele funkcji UserReactions pierwszą linią (przed const userReactions ... ) wpiszmy:

const dispatch = useDispatch()

I dodajmy do przycisku reakcji wysyłanie reactionClicked po kliknięciu, przy czym będzie przekazywane id produktu i nazwa reakcji, na którą kliknięto:

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

Pozostaje nam teraz wyświetlić komponent z reakcjami w strukturze HTML dla naszych stron. Zróbmy to w pliku ProductsList.jsx przed elementem Link:

<UserReactions product={product} />

I dokładnie tak samo przed elementem Link na stronie produktu w pliku ProductPage.jsx:

<UserReactions product={product} />

Teraz, gdy wszystko stanęło na swoim miejscu, możemy uruchomić naszą aplikację. Spróbujmy klikać na przyciski z reakcjami. Możemy dodać nowy produkt i również nacisnąć na nie. Teraz, niezależnie od tego, gdzie klikniemy na przyciski z reakcjami, zmienione wartości będą wyświetlane dla danego produktu na wszystkich stronach. Spójrz na stronę pojedynczego produktu (na której klikałeś/łaś na reakcje) i na stronę z ich listą i odwrotnie, dla wszystkich stron liczba reakcji dla konkretnego produktu będzie taka sama.

Ta lekcja była końcową w rozdziale dotyczącym pracy z danymi w Redux. Pracowaliśmy bardziej dogłębnie z danymi w Redux store i teraz wiemy, jak dodawać potrzebną nam funkcjonalność do aplikacji i używać danych w komponentach React.

Otwórz twoją aplikację ze studentami. W pliku studensSlice.js obiektom do inicializacji dodaj właściwość votes z odpowiednimi polami. Zrób to również dla reducera studentAdded.

Wewnątrz funkcji UserVotes w pliku UserVotes.jsx zadeklaruj dispatch dla hooka useDispatch i wykonaj wysyłanie akcji voteClicked po kliknięciu na przyciski głosowania, przekaż mu id studenta i nazwę vote, podobnie jak pokazano w lekcji.

Wyświetl przyciski do głosowania w strukturze HTML dla komponentów StudentsList i StudentPage.