# Форма для редактирования данных в Redux

Теперь у нас есть редьюсер для изменения данных в store. На этом уроке мы создадим форму, с помощью которой мы сможем редактировать данные продукта.

Давайте откроем наше приложение с продуктами и создадим в папке `products` файл `EditProductForm.jsx`. Создание компонента `EditProductForm` будет аналогично `NewProductForm`, за исключением некоторых отличий, на которых мы будем останавливаться. Поэтому скопируйте полностью код `NewProductForm.jsx` и вставьте его в созданный файл `EditProductForm.jsx`. Теперь начнем по порядку.

Уберите из импорта nanoid, здесь нам не нужно генерировать id. Замените импорт `productAdded` на `productUpdated`, ведь здесь мы будем использовать action для обновления, а не для добавления продукта.

Далее поменяем название функции нашего компонента с `NewProductForm` на `EditProductForm`.

Перед тем, как мы заведем локальные стейты в функции `EditProductForm` для `name`, `desc`, `price` и `amount`, давайте вставим еще несколько строчек кода. Как мы уже упомянали ранее, здесь нам не нужно генерировать id. Теперь наша задача получить его из данных изменяемого продукта. Мы уже так делали при создании отдельной странички для продукта. Итак, получим id при помощи хука `useParams`, а затем найдем нужный нам продукт, используя хук `useSelector` (не забудьте импортировать оба хука в начале файла):

`let params = useParams() const { productId } = params const product = useSelector((state) => state.products.find((product) => product.id === productId) )`

После этого поменяем блок с объявлением локальных стейтов. Теперь нам нужно в качестве начального значения задавать им полученные из store данные продукта. Вот так будет выглядеть первый стейт, переделайте три оставшихся сами:

`const [name, setName] = useState(product.name)`

После назначения переменной для `useDispatch` давайте внесем еще одну строчку кода на этот раз для хука `useNavigate`. Мы будем его использовать для возврата на страницу с продуктом, когда пользователь сохранит внесенные в форме изменения:

`const navigate = useNavigate()`

Также импортируем этот хук в начале файла:

`import { useNavigate, useParams } from 'react-router-dom'`

Далее у нас идут обработчики для полей ввода. А после них нам необходимо подправить функцию `onSaveProductClick`. Теперь в ней при клике мы будем отправлять экшен `productUpdated` с полученным id и измененными данными в виде объекта. После добавим наш `navigate`, для перехода на страничку измененного продукта:

`const onSaveProductClick = () => { if (name && desc && price && amount) { dispatch( productUpdated({ id: productId, name, desc, price, amount, }) ) navigate(`/products/${productId}`) } }`

Осталось только в нашей возвращаемой верстке найти строчку:

`<h2>Add a New Product</h2>`

И заменить ее на:

`<h2>Edit Product</h2>`

Откройте ваше приложение со студентами. Создайте файл `EditStudentForm.jsx` по аналогии с `NewStudentForm.jsx`. Внесите в него изменения, как показано в уроке.

← →
↑