Enviando actions em uma aplicação Redux

Agora temos um redutor para atualizar o slice de reações. Precisamos adicionar o envio de uma action que será disparada quando o usuário clicar em um botão de reação. Mas primeiro, para que tudo funcione completamente, precisamos fazer algumas alterações.

Vamos abrir nossa aplicação de produtos, e nela o arquivo productsSlice.js. Veja a definição de initialState. Viu? Nos objetos não há uma propriedade para reações. Vamos consertar isso, definindo os contadores para cada reação como 0:

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

No segundo objeto de inicialização, adicione a propriedade reactions você mesmo. Também precisamos adicionar esta propriedade abaixo no código do redutor productAdded, para que novos produtos também tenham essa funcionalidade. Vamos fazer isso em seu método prepare:

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

Agora vamos ao envio da action. Vamos abrir o arquivo UserReactions.jsx, então importar nele o hook useDispatch e reactionClicked:

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

No início do código, no corpo da função UserReactions, na primeira linha (antes de const userReactions ... ), vamos escrever:

const dispatch = useDispatch()

E vamos adicionar ao botão de reação o envio de reactionClicked no clique, onde será passado o id do produto e o nome da reação que foi clicada:

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

Agora só nos resta exibir o componente de reações no markup de nossas páginas. Vamos fazer isso no arquivo ProductsList.jsx antes do elemento Link:

<UserReactions product={product} />

E exatamente da mesma forma, antes do elemento Link na página do produto no arquivo ProductPage.jsx:

<UserReactions product={product} />

Agora, quando tudo está no seu lugar, podemos iniciar nossa aplicação. Vamos tentar clicar nos botões de reações. Podemos adicionar um novo produto e também clicar nele. Agora, onde quer que cliquemos nos botões de reações, os valores alterados serão exibidos para esse produto em todas as páginas. Veja a página do produto individual (onde você clicou nas reações) e a página com sua lista e vice-versa, para todas as páginas a contagem de reações para um produto específico será a mesma.

Esta lição foi a final do capítulo sobre trabalho com dados no Redux. Trabalhamos mais profundamente com dados na Redux store e agora sabemos como adicionar a funcionalidade necessária em nossa aplicação e usar dados em componentes React.

Abra sua aplicação de estudantes. No arquivo studensSlice.js, adicione aos objetos de inicialização a propriedade votes com os campos correspondentes. Faça isso também para o redutor studentAdded.

Dentro da função UserVotes no arquivo UserVotes.jsx, defina dispatch para o hook useDispatch e faça o envio da action voteClicked ao clicar nos botões de votação, passando o id do estudante e o nome do vote, similar ao mostrado na lição.

Exiba os botões de votação no markup para os componentes StudentsList e StudentPage.