Отправка 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, который у вас сгенерировался, пришлите его в ответе на эту задачу.

Отправка action и хук useDispatch в Redux

Тег form - HTML форма

Отправка action в Redux приложении

Тег input - поле ввода

Подготовка данных для объекта action в Redux

Отправка thunk из компонента в Redux

Хук ngOnInit в Angular