Obrazci in lokalna stanja v Reduxu

V prejšnjih lekcijah smo se naučili pridobivati podatke iz store in jih prikazovati v React komponenti. V tej lekciji bomo začeli dodajati nove podatke. Naredili bomo to z uporabo obrazca, s katerim bo prodajalec lahko dodal nov produkt.

Začnimo z dejstvom, da ni vedno smiselno uporabljati globalnega stanja Redux. Zdarjajo se primeri, ko lahko za naše potrebe ustvarimo lokalna stanja. Lokalna stanja bomo imenovali stanja, ki se uporabljajo znotraj določene komponente za tehnične potrebe. Na primer, da nekaj skrijemo ali prikažemo ob kliku na gumb.

V našem primeru bo uporabnik vnašal podatke v obrazec in seveda bomo za to potrebovali stanja. Lahko bi uporabili globalno stanje Redux, vendar v tem ni smisla, saj bodo naša stanja delovala samo na enem mestu v aplikaciji za obrazec dodajanja produkta. Glavno pravilo, ki se mu moramo pri tem držati, je, da lokalna stanja ne smejo delovati zunaj komponente, v kateri so bila ustvarjena, in nikakor ne smejo vplivati na store. Takšna praksa se pogosto uporablja pri ustvarjanju obrazcev.

Odprimo mapo products naše aplikacije s produkti, ustvarimo v njej datoteko NewProductForm.jsx in uvozimo vanjo kavelj useState:

import { useState } from 'react'

Zdaj ustvarimo samo komponento z obrazcem in vanjo vpišimo običajna stanja, kot smo to počeli prej v Reactu. Potrebujemo stanja za delo z imenom, opisom, ceno in količino produkta:

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

Nato dodajmo standardno obdelavo za vsako polje pri vnosu podatkov s strani uporabnika:

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)

In nato v komponenti vrnimo postavitev z naslovom in prazen obrazec:

return (
	<div>
		<h2>Dodaj nov produkt</h2>
		<form>
		</form>
	</div>
)

Odprite vašo aplikacijo s študenti. Ustvarite datoteko NewStudentForm.jsx v mapi students. V komponenti NewStudentForm ustvarite lokalna stanja za potrebna polja, za vsako polje napišite obdelavo, kot je prikazano v lekciji.

V komponenti NewStudentForm vrnite postavitev, ki vsebuje naslov in prazen obrazec.