Форма для редактирования данных в 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. Внесите
в него изменения, как показано в уроке.