Формы и локальные стейты в Redux
В прошлых уроках мы научились получать данные из store и выводить их в React компоненте. В этом уроке мы приступим к добавлению новых данных. Делать мы это будем при помощи формы, заполнив которую, продавец сможет добавить новый продукт.
Начнем с того, что не всегда есть смысл использовать глобальный стейт Redux. Бывают случаи, когда мы под наши нужды можем создавать локальные стейты. Локальными стейтами мы будем называть стейты, которые используются внутри определенного компонента для технических нужд. К примеру, чтобы скрыть или показать что-то по кнопке.
В нашем случае пользователь будет вводить данные в форму и, естественно, нам пригодятся для этого стейты. Можно было бы воспользоваться глобальным Redux стейтом, но в этом нет смысла, поскольку наши стейты будут работать только в одном месте приложения для формы добавления продукта. Главное правило, которому при этом нужно следовать - нельзя, чтобы локальные стейты работали за пределами компонента, в котором они созданы, и ни в коем случае не касались store. Такая практика часто используется при создании форм.
Давайте откроем папку products нашего
приложения с продуктами, создадим в ней
файл NewProductForm.jsx и импортириуем
в него хук useState:
import { useState } from 'react'
Теперь создадим сам компонент с формой и пропишем в нем обычные стейты, как мы делали это раньше в React. Нам нужны стейты для работы с названием, описанием, ценой и количеством продукта:
export const NewProductForm = () => {
const [name, setName] = useState('')
const [desc, setDesc] = useState('')
const [price, setPrice] = useState(0)
const [amount, setAmount] = useState(0)
}
Далее добавим стандартную обработку для каждого поля при введении пользователем данных:
const onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)
И затем вернем в компоненте верстку с заголовком и пустой формой:
return (
<div>
<h2>Add a New Product</h2>
<form>
</form>
</div>
)
Откройте ваше приложение со студентами.
Создайте файл NewStudentForm.jsx в папке
students. Заведите в компоненте
NewStudentForm локальные стейты для
необходимых вам полей, напишите для каждого
поля обработку, как показано в уроке.
Верните в компоненте NewStudentForm
верстку, содержащую заголовок и пустую форму.