Dispatching an action in a Redux application

Now we have a reducer to update the slice with reactions. Now we need to add an action dispatch that will be triggered when the user clicks on the button with the reaction. But before that, to make everything fully work, we need to make a couple of changes.

Let's open our product app, and in it the file productsSlice.js. Look at the definition of initialState. See? There is no property with reactions in the objects. Let's fix this by setting the counters of each reaction to 0:

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

In the second object for initialization, add the reactions property yourself. We need to add the same property below to the code for the productAdded reducer, so that new products also have this functionality. Let's do this for its prepare method:

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

Now let's start sending the action. Open the UserReactions.jsx file, then import the useDispatch and reactionClicked hooks into it:

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

At the beginning of the code in the body of the function UserReactions on the first line (before const userReactions ... ) we write:

const dispatch = useDispatch()

And we'll attach a reactionClicked send to the reaction button when clicked, and we'll transmit the product ID and the name of the reaction that was clicked:

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

Now we just need to output the component with reactions in the layout for our pages. Let's do this in the ProductsList.jsx file before the Link element:

<UserReactions product={product} />

And exactly the same before the Link element on the product page in the ProductPage.jsx file:

<UserReactions product={product} />

Now that everything is in place, we can run our application. Let's try clicking on the reaction buttons. We can add a new product and click on them as well. Now, wherever we click on the reaction buttons, the changed values will be displayed for this product on all pages. Look at the page of a single product (where you clicked on the reactions) and the page with their list and vice versa, for all pages the number of reactions for a specific product will be the same.

This lesson was the final one in the chapter on working with data in Redux. We worked more deeply with data in the Redux store and now know how to add the functionality we need to the application and use data in React components.

Open your app with students. In the studensSlice.js file, add a votes property with the appropriate fields to the initialization objects. Do the same for the studentAdded reducer.

Inside the UserVotes function in the UserVotes.jsx file, create a dispatch hook for the useDispatch hook and dispatch the voteClicked action when the voting buttons are clicked, pass it the student id and the vote name, similar to how it is shown in the tutorial.

Display voting buttons in the layout for the StudentsList and StudentPage components.