Formas un lokālie stāvokļi Redux

Iepriekšējās nodarbībās mēs iemācījāmies iegūt datus no store un attēlot tos React komponentē. Šajā nodarbībā mēs sāksim pievienot jaunus datus. Mēs to darīsim izmantojot formu, aizpildot kuru, pārdevējs varēs pievienot jaunu produktu.

Sāksim ar to, ka ne vienmēr ir jēga izmantot globālo Redux stāvokli. Ir gadījumi, kad mēs varam izveidot lokālus stāvokļus savām vajadzībām. Par lokāliem stāvokļiem mēs sauksim stāvokļus, kas tiek izmantoti konkrēta komponenta iekšienē tehniskām vajadzībām. Piemēram, lai paslēptu vai parādītu kaut ko ar pogas palīdzību.

Mūsu gadījumā lietotājs ievadīs datus formā, un, protams, mums būs vajadzīgi šim nolūkam stāvokļi. Varētu izmantot globālo Redux stāvokli, bet tam nav jēgas, jo mūsu stāvokļi darbosies tikai vienā vietā aplikācijā - produktu pievienošanas formā. Galvenais noteikums, kas tam jāseko - lokālie stāvokļi nedrīkst darboties ārpus komponenta, kurā tie ir izveidoti, un nekādā gadījumā nedrīkst ietekmēt store. Šāda prakse bieži tiek izmantota, veidojot formas.

Atvērsim mapi products mūsu aplikācijas ar produktiem, izveidosim tajā failu NewProductForm.jsx un importēsim tajā hook useState:

import { useState } from 'react'

Tagad izveidosim pašu komponentu ar formu un ierakstīsim tajā parastos stāvokļus, kā mēs to darījām iepriekš React. Mums vajag stāvokļus, lai strādātu ar nosaukumu, aprakstu, cenu un produkta daudzumu:

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

Tālāk pievienosim standarta apstrādi katram laukam, kad lietotājs ievada datus:

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)

Un pēc tam atgriezīsim komponentē izkārtojumu ar virsrakstu un tukšu formu:

return (
	<div>
		<h2>Pievienot jaunu produktu</h2>
		<form>
		</form>
	</div>
)

Atveriet savu aplikāciju ar studentiem. Izveidojiet failu NewStudentForm.jsx mapē students. Izveidojiet komponentē NewStudentForm lokālos stāvokļus neciešamajiem laukiem, uzrakstiet katram laukam apstrādi, kā parādīts nodarbībā.

Atgrieziet komponentē NewStudentForm izkārtojumu, kas satur virsrakstu un tukšu formu.