Formularze i lokalne stany w Redux

W poprzednich lekcjach nauczyliśmy się pobierać dane ze store i wyświetlać je w komponencie React. Na tej lekcji przystąpimy do dodawania nowych danych. Będziemy to robić za pomocą formularza, po wypełnieniu którego sprzedawca będzie mógł dodać nowy produkt.

Zacznijmy od tego, że nie zawsze ma sens używanie globalnego stanu Redux. Zdarzają się przypadki, kiedy dla naszych potrzeb możemy tworzyć lokalne stany. Stanami lokalnymi będziemy nazywać stany, które są używane wewnątrz określonego komponentu dla potrzeb technicznych. Na przykład, aby coś ukryć lub pokazać po kliknięciu przycisku.

W naszym przypadku użytkownik będzie wprowadzał dane do formularza i, naturalnie, przydadzą się nam do tego stany. Można by skorzystać z globalnego stanu Redux, ale nie ma to sensu, ponieważ nasze stany będą działać tylko w jednym miejscu aplikacji dla formularza dodawania produktu. Główna zasada, której trzeba przy tym przestrzegać - nie można, aby stany lokalne działały poza komponentem, w którym zostały utworzone, i w żadnym wypadku nie dotyczyły store. Taka praktyka jest często używana przy tworzeniu formularzy.

Otwórzmy folder products naszej aplikacji z produktami, utwórzmy w nim plik NewProductForm.jsx i zaimportujmy do niego hook useState:

import { useState } from 'react'

Teraz utwórzmy sam komponent z formularzem i wpiszmy w nim zwykłe stany, jak my robiliśmy to wcześniej w React. Potrzebujemy stanów do pracy z nazwą, opisem, ceną i ilością produktu:

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

Następnie dodajmy standardowe przetwarzanie dla każdego pola przy wprowadzaniu przez użytkownika danych:

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)

I następnie zwróćmy w komponencie wersję z nagłówkiem i pustym formularzem:

return (
	<div>
		<h2>Add a New Product</h2>
		<form>
		</form>
	</div>
)

Otwórz twoją aplikację ze studentami. Utwórz plik NewStudentForm.jsx w folderze students. Zdefiniuj w komponencie NewStudentForm lokalne stany dla potrzebnych tobie pól, napisz dla każdego pola przetwarzanie, jak pokazano w lekcji.

Zwróć w komponencie NewStudentForm wersję, zawierającą nagłówek i pusty formularz.