Форми и локални състояния в 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 верстка, съдържаща заглавие и празна форма.