Изпращане на action и хук useDispatch в Redux

Ние реализирахме почти всички компоненти за работата на Redux приложение. Остава само да разберем как да изпращаме action от React компонент. Да започваме.

Отворете нашето приложение с продукти. В формата на компонента NewProductForm имаме бутон за запазване на данните за новия продукт. Нека добавим манипулатор на клик към него. Нека при клик върху него се задейства манипулаторът onSaveProductClick:

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

При създаване на нов продукт ще ни е необходим нов id за него. Ще го генерираме чрез широко известната библиотека nanoid. Между другото, не е необходимо да я инсталирате, тъй като тя вече идва с пакета RTK. Нека добавим nanoid в импорта:

import { nanoid } from '@reduxjs/toolkit'

Също така помним, че единственият начин да променим state - е да извикаме метода dispatch, който се намира в store и да подадем обект action. За да достигнем до този метод, ние ще използваме React-Redux хука useDispatch. Нека го импортираме:

import { useDispatch } from 'react-redux'

В кода на функцията NewProductForm ще декларираме константа dispatch веднага след като сме декларирали константите за нашите локални състояния:

const dispatch = useDispatch()

Също така е необходимо да импортираме action creator productAdded, който получихме в предишния урок:

import { productAdded } from './productsSlice'

Сега можем да напишем самата функция манипулатор onSaveProductClick. Нека го направим преди командата return:

const onSaveProductClick = () => {}

Вътре във функцията извикваме dispatch, създаваме обект action, в свойството payload на който ще сложим генерирания id, име, описание, цена и количество на продукта. Всички тези данни взимаме от локалните състояния. В началото проверяваме в условие дали всички полета са попълнени - само в този случай извикваме dispatch. В края на кода на функцията връщаме локалните състояния в първоначалното им състояние:

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

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

Сега нека стартираме нашето приложение, въведем данни в полетата на формата и натиснем бутона за запазване. Ура, в долната част на страницата се появи нов продукт. Като отворите Redux DevTools, а в него раздела Inspector, виждаме, че вляво освен @@INIT се е появил и нашият action products/productAdded. А в дясната част можем да кликваме върху разделите Action и State, превключвайки между @@INIT и products/productAdded. Сега виждаме, че новият ни продукт се добавя. Също така в раздела Action виждаме action, генериран автоматично чрез createSlice (кликнете, например, върху Raw). Ура: не беше необходимо да го пишем ръчно.

Отворете вашето приложение със студенти, а след това файла NewStudentForm.jsx, добавете към бутона за запазване манипулатор на клик.

Напишете всички необходими импорти и напишете функцията-манипулатор onSaveStudentClick, прилагайки метода dispatch както е показано в урока.

Стартирайте приложението, въведете в полетата на формата данни и натиснете бутона за запазване. Уверете се, че в долната част на страницата се е добавил нов студент.

Отворете Redux DevTools и разгледайте разделите Action и State, уверете се, че новият обект със студент се добавя. Погледнете обекта action, който се е генерирал, изпратете го в отговор на тази задача.