Formuláre a lokálne stavy v Reduxe

V predchádzajúcich lekciách sme sa naučili získavať údaje z úložiska (store) a zobrazovať ich v React komponente. V tejto lekcii začneme pridávať nové údaje. Urobíme to pomocou formulára, ktorý po vyplnení umožní predajcovi pridať nový produkt.

Začnime tým, že nie vždy má zmysel používať globálny stav Reduxu. Vyskytujú sa prípady, kedy pre naše potreby môžeme vytvoriť lokálne stavy. Lokálnymi stavmi budeme nazývať stavy, ktoré sa používajú vnútri konkrétneho komponentu pre technické potreby. Napríklad na skrytie alebo zobrazenie niečoho po kliknutí na tlačidlo.

V našom prípade bude používateľ zadávať údaje do formulára a preto sa nám pre toto budú hodiť stavy. Mohli by sme použiť globálny Redux stav, ale na to nie je zmysel, pretože naše stavy budú fungovať iba na jednom mieste v aplikácii pre formulár na pridanie produktu. Hlavné pravidlo, ktorému pri tom treba dodržiavať - nesmie sa, aby lokálne stavy fungovali mimo komponentu, v ktorom sú vytvorené, a v žiadnom prípade sa nedotkli úložiska (store). Takáto praxa sa často používa pri vytváraní formulárov.

Otvorme priečinok products našej aplikácie s produktami, vytvorme v nej súbor NewProductForm.jsx a importujme do neho hook useState:

import { useState } from 'react'

Teraz vytvorme samotný komponent s formulárom a zapíšme do neho obyčajné stavy, ako sme to robili predtým v Reacte. Potrebujeme stavy pre prácu s názvom, popisom, cenou a množstvom produktu:

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

Ďalej pridajme štandardné spracovanie pre každé pole pri zadaní údajov používateľom:

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 potom vráťme v komponente verzťazenie s nadpisom a prázdnym formulárom:

return (
	<div>
		<h2>Pridať nový produkt</h2>
		<form>
		</form>
	</div>
)

Otvorte vašu aplikáciu so študentmi. Vytvorte súbor NewStudentForm.jsx v priečinku students. Založte v komponente NewStudentForm lokálne stavy pre potrebné polia, napíšte pre každé pole spracovanie, ako je ukázané v lekcii.

Vráťte v komponente NewStudentForm verzťazenie, obsahujúce nadpis a prázdny formulár.