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:

products/productsSlice.js{
  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:

products/productsSlice.jsprepare(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:

products/UserReactions.jsximport { 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:

products/UserReactions.jsxconst 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:

products/UserReactions.jsx<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:

products/ProductsList.jsx<UserReactions product={product} />

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

products/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.