Vormid ja kohalikud olekud Reduxis

Eelmistel tundidel õppisime andmeid poest kätte saama ja neid React komponendis kuvama. Sellel tunnil alustame uute andmete lisamisega. Teeme seda vormi abil, mille täitmisel saab müüja lisada uue toote.

Alustame sellest, et alati ei ole mõtet kasutada Reduxi globaalset olekut. On juhtumeid, kui saame oma vajaduste jaoks luua kohalikke olekuid. Kohalikeks olekuteks nimetame olekuid, mida kasutatakse teatud komponendi sees tehnilistel eesmärkidel. Näiteks et midagi peita või näidata nupu vajutuse peale.

Meie puhul sisestab kasutaja andmeid vormi ja loomulikult vajame me selleks olekuid. Võiksime kasutada globaalset Reduxi olekut, kuid selles pole mõtet, kuna meie olekud töötavad ainult ühes kohas rakenduses, mis on vorm toote lisamiseks. Peamine reegel, mida sellisel juhul tuleb järgida - ei saa lasta kohalikel olekutel töötada väljaspool komponenti, kus need on loodud, ja mitte mingil juhul ei tohi need puudutada poodi. Sellist praktikat kasutatakse sageli vormide loomisel.

Avame oma tooterakenduse kausta products, loome selles faili NewProductForm.jsx ja impordime sinna konksu useState:

import { useState } from 'react'

Nüüd loome komponendi enda koos vormiga ja kirjutame sellesse tavalised olekud, nagu me seda varem Reactis tegime. Me vajame olekuid toote nime, kirjelduse, hinna ja koguse jaoks:

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

Järgmisena lisame standardset töötlemist iga välja jaoks, kui kasutaja sisestab andmeid:

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)

Ja siis tagastame komponendis märgistusega keele koos pealkirja ja tühja vormiga:

return (
	<div>
		<h2>Lisa Uus Toode</h2>
		<form>
		</form>
	</div>
)

Avage oma õpilaste rakendus. Looge fail NewStudentForm.jsx kausta students. Looge komponendis NewStudentForm kohalikud olekud vajalike väljade jaoks, kirjutage iga välja jaoks töötlus, nagu on näidatud tunnis.

Tagastage komponendis NewStudentForm märgistuskeel, mis sisaldab pealkirja ja tühja vormi.