Formos ir lokalios būsenos Redux

Ankstesnėse pamokose išmokome gauti duomenis iš store ir juos atvaizduoti React komponente. Šioje pamokoje pradėsime pridėti naujus duomenis. Tai darysime naudodami formą, kurią užpildžius, pardavėjas galės pridėti naują produktą.

Pradėsime nuo to, kad ne visada yra prasmė naudoti globalią Redux būseną. Būna atvejų, kai savo poreikiams galime kurti lokalias būsenas. Lokaliomis būsenomis vadinsime būsenas, kurios naudojamos tam tikro komponento viduje techniniams poreikiams. Pavyzdžiui, kad paslėpti arba parodyti ką nors paspaudus mygtuką.

Mūsų atveju vartotojas ves duomenis į formą ir, natūralu, mums prireiks tam būsenų. Galima būtų pasinaudoti globalia Redux būsena, tačiau tame nėra prasmės, nes mūsų būsenos veiks tik vienoje aplikacijos vietoje – produkto pridėjimo formoje. Pagrindinė taisyklė, kuriai reikia sekti - negalima leisti, kad lokalios būsenos veiktų už komponento, kuriame jos sukurtos, ribų ir jokiu atveju neliestų store. Tokia praktika dažnai naudojama kuriant formas.

Atidarykime aplanką products mūsų aplikacijos su produktais, sukurkime jame failą NewProductForm.jsx ir importuokime jį į hook'ą useState:

import { useState } from 'react'

Dabar sukurkime patį komponentą su forma ir parašykime jame įprastas būsenas, kaip mes tai darėme anksčiau React. Mums reikia būsenų, kad dirbtume su pavadinimu, aprašu, kaina ir produkto kiekiu:

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

Toliau pridėkime standartinį apdorojimą kiekvienam laukelui, kai vartotojas įveda duomenis:

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)

Ir tada grąžinkime komponente išdėstymą su antrašte ir tuščia forma:

return (
	<div>
		<h2>Pridėti naują produktą</h2>
		<form>
		</form>
	</div>
)

Atidarykite savo studentų aplikaciją. Sukurkite failą NewStudentForm.jsx aplanke students. Apibrėžkite komponente NewStudentForm lokalias būsenas jums reikalingiems laukams, parašykite kiekvienam laukui apdorojimą, kaip parodyta pamokoje.

Grąžinkite komponente NewStudentForm išdėstymą, kuriame yra antraštė ir tuščia forma.