Форми и локални състояния в Redux

В предишните уроци се научихме да извличаме данни от store и да ги извеждаме в React компонент. В този урок ще започнем да добавяме нови данни. Ще правим това с помощта на форма, при попълването на която, продавачът ще може да добави нов продукт.

Да започнем с това, че не винаги има смисъл да използваме глобалното състояние на Redux. Има случаи, когато за нашите нужди можем да създаваме локални състояния. Локални състояния ще наричаме състояния, които се използват вътре в определен компонент за технически нужди. Например, за да скрием или покажем нещо по бутон.

В нашия случай потребителят ще въвежда данни във формата и естествено ще ни трябват за това състояния. Бихме могли да използваме глобалното Redux състояние, но в това няма смисъл, тъй като нашите състояния ще работят само на едно място в приложението за формата за добавяне на продукт. Основното правило, на което трябва да се следва при това - не може локалните състояния да работят извън компонента, в който са създадени, и в никакъв случай да не засягат store. Такава практика често се използва при създаване на форми.

Нека да отворим папката products на нашето приложение с продукти, да създадем в нея файл NewProductForm.jsx и да импортираме в него хука useState:

products/NewProductForm.jsximport { useState } from 'react'

Сега нека създадем самия компонент с формата и да напишем в него обикновени състояния, както правихме това преди в React. Нужни ни са състояния за работа с името, описанието, цената и количеството на продукта:

products/NewProductForm.jsxexport const NewProductForm = () => {
  const [name, setName] = useState('')
  const [desc, setDesc] = useState('')
  const [price, setPrice] = useState(0)
  const [amount, setAmount] = useState(0)
}

След това ще добавим стандартна обработка за всяко поле при въвеждане на данни от потребителя:

products/NewProductForm.jsxconst 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)

И след това ще върнем в компонента верстка с заглавие и празна форма:

products/NewProductForm.jsxreturn (
  <div>
    <h2>Add a New Product</h2>
    <form>
    </form>
  </div>
)