Lomakkeet ja paikalliset tilat Reduxissa

Edellisillä oppitunneilla opimme hakemaan tietoa storesta ja näyttämään sen React- komponentissa. Tällä oppitunnilla aloitamme uuden tiedon lisäämisen. Teemme tämän lomakkeen avulla, jolla myyjä voi lisätä uuden tuotteen.

Aloitetaan siitä, että Reduxin globaalin tilan käytöllä ei aina ole järkeä. On tapauksia, joissa voimme luoda paikallisia tiloja tarpeisiimme. Paikallisilla tiloilla tarkoitamme tiloja, joita käytetään tietyn komponentin sisällä teknisiin tarpeisiin. Esimerkiksi piilottaaksesi tai näyttääksesi jotain painikkeen avulla.

Meidän tapauksessamme käyttäjä syöttää tietoja lomakkeeseen, ja tarvitsemme tähän luonnollisesti tiloja. Voisimme hyödyntää globaalia Redux-tilaa, mutta siihen ei ole järkeä, koska tilamme toimivat vain yhdessä paikassa sovelluksessa tuotteen lisäyslomaketta varten. Tärkein noudatettava sääntö on, että paikallisten tilojen ei saa toimia niiden komponentin ulkopuolella, jossa ne on luotu, eikä niiden missään tapauksessa saa koskea storeen. Tätä käytäntöä käytetään usein lomakkeita luotaessa.

Avataan products -kansio tuotesovelluksestamme, luodaan siihen tiedosto NewProductForm.jsx ja tuodaan siihen useState -hook:

import { useState } from 'react'

Luodaan nyt itse komponentti lomakkeella ja määritellään siihen tavalliset tilat, kuten teimme aiemmin Reactissa. Tarvitsemme tilat tuotteen nimen, kuvauksen, hinnan ja määrän käsittelyyn:

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

Lisätään seuraaksi standardikäsittely jokaiselle kentälle käyttäjän syöttäessä tietoja:

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 palautetaan sitten komponentissa renderöinti otsikon ja tyhjän lomakkeen kanssa:

return (
	<div>
		<h2>Lisää uusi tuote</h2>
		<form>
		</form>
	</div>
)

Avaa opiskelijasovelluksesi. Luo tiedosto NewStudentForm.jsx kansioon students. Määritä NewStudentForm -komponentissa paikalliset tilat tarvitsemillesi kentille, kirjoita jokaiselle kentälle käsittely, kuten oppitunnilla on näytetty.

Palauta NewStudentForm -komponentissa renderöinti, joka sisältää otsikon ja tyhjän lomakkeen.