Dispatching an action and the useDispatch hook in Redux

We have implemented almost all the components for the Redux application to work. All that remains is to figure out how to send an action from a React component. Let's get started.

Open our product app. In the component form NewProductForm we have a button for saving the new product data. Let's attach a click handler to it. Let the handler onSaveProductClick be triggered when clicked:

<button type="button" onClick={onSaveProductClick}>
	save
</button>

When creating a new product, we will need a new id for it. We will generate it using the well-known library nanoid. By the way, you don't need to install it, because it already comes with the RTK package. Let's add nanoid to the import:

import { nanoid } from '@reduxjs/toolkit'

We also remember that the only way to change the state is to call the dispatch method that the store has and pass in the action object. To get to this method, we'll use the React-Redux hook useDispatch. Let's import it too:

import { useDispatch } from 'react-redux'

In the code of the NewProductForm function, we will create a constant dispatch for it right after we created constants for our local states:

const dispatch = useDispatch()

We also need to import the action creator productAdded that we got in the last lesson:

import { productAdded } from './productsSlice'

Now we can write the onSaveProductClick handler function itself. Let's do this before the return command:

const onSaveProductClick = () => {}

Inside the function, we call dispatch, form an action object, in the payload property of which we will get the generated id, name, description, price and quantity of the product. We take all this data from local states. At the same time, at the beginning, we check in the condition whether all the fields are filled - only in this case we call dispatch. At the end of the function code, we return the local states to their original state:

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productAdded({
				id: nanoid(),
				name,
				desc,
				price,
				amount
			})
		)

		setName('')
		setDesc('')
		setPrice(0)
		setAmount(0)
	}
}

Now let's run our application, enter data into the form fields and click the save button. Hooray, a new product has appeared at the bottom of the page. Opening Redux DevTools, and in it the Inspector tab, we see that on the left, in addition to @@INIT our action products/productAdded also appeared. And on the right side we can click on the Action and State tabs, switching @@INIT and products/productAdded. Now we see that our new product is added. Also in the Action tab we see the action generated automatically by createSlice (click on Raw, for example). Hooray: we didn't have to write it manually.

Open your application with students, and then the file NewStudentForm.jsx, attach a click handler to the save button.

Write all the necessary imports and write the handler function onSaveStudentClick, using the dispatch method as shown in the lesson.

Launch the application, fill in the form fields and click the save button. Make sure that a new student has been added to the page below.

Open Redux DevTools and go through the Action and State tabs, make sure that a new object with a student is added. Look at the action object that you generated, send it in the answer to this task.