Envío de action en una aplicación Redux

Ahora tenemos un reductor para actualizar el slice de reacciones. Actualmente necesitamos agregar el envío de una action que se active cuando el usuario haga clic en el botón de reacción. Pero antes, para que todo funcione completamente, necesitamos hacer un par de cambios.

Abramos nuestra aplicación de productos, y en ella el archivo productsSlice.js. Mire la definición de initialState. ¿Ve? En los objetos no hay una propiedad con reacciones. Arreglemos esto, estableciendo los contadores de cada reacción en 0:

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

En el segundo objeto de inicialización, agregue la propiedad reactions usted mismo. Esta propiedad también la necesitamos agregar más abajo en el código para el reductor productAdded, para que los nuevos productos también tengan esta funcionalidad. Hagamos esto para su 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,
			},
		},
	}
},

Ahora procedamos a enviar la action. Abramos el archivo UserReactions.jsx, luego importemos en él el hook useDispatch y reactionClicked:

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

Al principio del código en el cuerpo de la función UserReactions en la primera línea (antes de const userReactions ... ) escribamos:

const dispatch = useDispatch()

Y asignemos al botón de reacción el envío de reactionClicked al hacer clic, además se pasará la id del producto y el nombre de la reacción en la que se hizo clic:

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

Ahora nos queda mostrar el componente de reacciones en el maquetado para nuestras páginas. Hagamos esto en el archivo ProductsList.jsx antes del elemento Link:

<UserReactions product={product} />

Y exactamente igual antes del elemento Link en la página del producto en el archivo ProductPage.jsx:

<UserReactions product={product} />

Ahora, cuando todo está en su lugar, podemos ejecutar nuestra aplicación. Probemos a hacer clic en los botones de reacciones. Podemos agregar un nuevo producto y también presionar ellos. Ahora, donde sea que hagamos clic en los botones de reacciones, los valores modificados se mostrarán para este producto en todas las páginas. Mire la página del producto individual (en la que hizo clic en las reacciones) y la página con su lista y viceversa, para todas las páginas el número de reacciones para un producto específico será el mismo.

Esta lección fue la final en el capítulo sobre el trabajo con datos en Redux. Trabajamos más en profundidad con los datos en el store de Redux y ahora sabemos cómo agregar la funcionalidad que necesitamos en la aplicación y usar los datos en los componentes de React.

Abra su aplicación de estudiantes. En el archivo studensSlice.js agregue a los objetos de inicialización la propiedad votes con los campos correspondientes. Haga esto también para el reductor studentAdded.

Dentro de la función UserVotes en el archivo UserVotes.jsx defina dispatch para el hook useDispatch y haga el envío de la action voteClicked al hacer clic en los botones de votación, pásele la id del estudiante y el nombre de vote, similar a como se muestra en la lección.

Muestre los botones para votar en el maquetado para los componentes StudentsList y StudentPage.