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

← →
↑