Skjemaer og lokale tilstander i Redux

I tidligere leksjoner lærte vi å hente data fra store og vise dem i en React komponent. I denne leksjonen skal vi begynne å legge til nye data. Vi gjør dette ved hjelp av et skjema, som selgeren kan fylle ut for å legge til en ny produkt.

La oss starte med at det ikke alltid er mening å bruke Redux sin globale tilstand. Det finnes tilfeller der vi for våre behov kan opprette lokale tilstander. Med lokale tilstander mener vi tilstander som brukes innenfor en spesifikk komponent for tekniske behov. For eksempel for å skjule eller vise noe ved et knappetrykk.

I vårt tilfelle skal brukeren skrive inn data i skjemaet, og naturligvis trenger vi tilstander for dette. Vi kunne ha brukt den globale Redux-tilstanden, men det er ikke noen mening med det, siden våre tilstander kun vil fungere på ett sted i applikasjonen for skjemaet for å legge til produkt. Hovedregelen som må følges er at lokale tilstander ikke kan fungere utenfor komponenten der de er opprettet, og de må absolutt ikke berøre store. Slik praksis brukes ofte når man oppretter skjemaer.

La oss åpne mappen products i applikasjonen vår med produkter, opprette en fil NewProductForm.jsx i den og importere hooken useState:

import { useState } from 'react'

La oss nå opprette selve komponenten med skjema og skrive inn vanlige tilstander i den, slik vi gjorde det tidligere i React. Vi trenger tilstander for å jobbe med navnet, beskrivelsen, prisen og antallet på produktet:

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

Deretter legger vi til standard håndtering for hvert felt når brukeren skriver inn data:

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)

Og deretter returnerer vi i komponenten koden med en overskrift og et tomt skjema:

return (
	<div>
		<h2>Legg til et nytt produkt</h2>
		<form>
		</form>
	</div>
)

Åpne applikasjonen din med studenter. Opprett en fil NewStudentForm.jsx i mappen students. Opprett i komponenten NewStudentForm lokale tilstander for de nødvendige feltene, skriv for hvert felt en håndteringsfunksjon, som vist i leksjonen.

Returner i komponenten NewStudentForm kode som inneholder en overskrift og et tomt skjema.