Formuláře a lokální stavy v Reduxu

V předchozích lekcích jsme se naučili získávat data z store a zobrazovat je v React komponentu. V této lekci začneme přidávat nová data. Uděláme to pomocí formuláře, po jehož vyplnění bude prodejce moci přidat nový produkt.

Začněme tím, že ne vždy má smysl používat globální stav Reduxu. Jsou případy, kdy pro naše potřeby můžeme vytvářet lokální stavy. Lokálními stavy budeme nazývat stavy, které se používají uvnitř určitého komponentu pro technické potřeby. Například pro skrytí nebo zobrazení něčeho po kliknutí na tlačítko.

V našem případě bude uživatel zadávat data do formuláře a přirozeně se nám pro to budou hodit stavy. Mohli bychom použít globální Redux stav, ale to nedává smysl, protože naše stavy budou fungovat pouze na jednom místě aplikace pro formulář přidání produktu. Hlavní pravidlo, kterého je přitom třeba se držet - nesmí se, aby lokální stavy fungovaly mimo komponent, ve kterém byly vytvořeny, a v žádném případě se nesměly dotýkat store. Taková praxe se často používá při vytváření formulářů.

Pojďme otevřít složku products naší aplikace s produkty, vytvořit v ní soubor NewProductForm.jsx a importovat do něj hook useState:

import { useState } from 'react'

Nyní vytvoříme samotný komponent s formulářem a napíšeme v něm obyčejné stavy, jak jsme to dělali dříve v Reactu. Potřebujeme stavy pro práci s názvem, popisem, cenou a množstvím produktu:

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

Dále přidáme standardní zpracování pro každé pole při zadávání dat uživatelem:

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)

A poté vrátíme v komponentu značkování s nadpisem a prázdným formulářem:

return (
	<div>
		<h2>Přidat nový produkt</h2>
		<form>
		</form>
	</div>
)

Otevřete vaši aplikaci se studenty. Vytvořte soubor NewStudentForm.jsx ve složce students. Založte v komponentu NewStudentForm lokální stavy pro potřebná pole, napište pro každé pole zpracování, jak je ukázáno v lekci.

Vraťte v komponentu NewStudentForm značkování, obsahující nadpis a prázdný formulář.