Formulär och lokala tillstånd i Redux

I tidigare lektioner lärde vi oss att hämta data från store och visa dem i en React- komponent. I den här lektionen börjar vi lägga till nya data. Vi kommer att göra detta med hjälp av ett formulär som säljaren kan fylla i för att lägga till en ny produkt.

Låt oss börja med att det inte alltid är meningsfullt att använda Redux globalt tillstånd. Det finns fall då vi för våra behov kan skapa lokala tillstånd. Med lokala tillstånd menar vi tillstånd som används inom en specifik komponent för tekniska behov. Till exempel för att dölja eller visa något med en knapp.

I vårt fall kommer användaren att mata in data i formuläret, och naturligtvis kommer vi att behöva tillstånd för detta. Vi kunde ha använt det globala Redux-tillståndet, men det finns ingen mening med det, eftersom våra tillstånd endast kommer att fungera på en plats i applikationen - i formuläret för att lägga till en produkt. Den viktigaste regeln som måste följas är att lokala tillstånd inte får fungera utanför komponenten där de skapades, och de får på inga vilkor beröra store. Sådan praxis används ofta när man skapar formulär.

Låt oss öppna mappen products i vår produktapplikation, skapa en fil NewProductForm.jsx i den och importera hooken useState:

import { useState } from 'react'

Låt oss nu skapa själva komponenten med formuläret och skriva in vanliga tillstånd i den, som vi gjorde tidigare i React. Vi behöver tillstånd för att arbeta med produktens namn, beskrivning, pris och antal:

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

Låt oss sedan lägga till standardhantering för varje fält när användaren matar in 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)

Och sedan returnera markup med en rubrik och ett tomt formulär i komponenten:

return (
	<div>
		<h2>Lägg till en ny produkt</h2>
		<form>
		</form>
	</div>
)

Öppna din studentapplikation. Skapa en fil NewStudentForm.jsx i mappen students. Skapa lokala tillstånd för de nödvändiga fälten i komponenten NewStudentForm, skriv hantering för varje fält, som visas i lektionen.

Returnera markup i komponenten NewStudentForm som innehåller en rubrik och ett tomt formulär.