Forme i lokalni stanje u Redux-u

U prethodnim lekcijama naučili smo kako da dohvatimo podatke iz store-a i prikažemo ih u React komponenti. Na ovoj lekciji ćemo početi sa dodavanjem novih podataka. To ćemo učiniti pomoću forme, popunjavanjem koje prodavac može da doda novi proizvod.

Počećemo od toga da nema uvek smisla koristiti globalni Redux stanje. Postoje slučajevi kada za naše potrebe možemo kreirati lokalna stanja. Lokalnim stanjima ćemo nazivati stanja koja se koriste unutar određene komponente za tehničke potrebe. Na primer, da bi se nešto sakrilo ili prikazalo na klik dugmeta.

U našem slučaju, korisnik će unositi podatke u formu i, naravno, trebaće nam stanja za to. Mogli bismo da iskoristimo globalno Redux stanje, ali u tome nema smisla, pošto će naša stanja raditi samo na jednom mestu u aplikaciji za formu dodavanja proizvoda. Glavno pravilo koje pri tome treba poštovati je da lokalna stanja ne smeju da rade izvan komponente u kojoj su kreirana, i ni u kom slučaju ne smeju da dodiruju store. Takva praksa se često koristi pri kreiranju formi.

Hajde da otvorimo folder products naše aplikacije sa proizvodima, kreiramo u njemu fajl NewProductForm.jsx i importujemo u njega hook useState:

import { useState } from 'react'

Sada hajde da kreiramo samu komponentu sa formom i napišemo u njoj obična stanja, kao što smo to ranije radili u React-u. Potrebna su nam stanja za rad sa nazivom, opisom, cenom i količinom proizvoda:

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

Zatim dodajmo standardnu obradu za svako polje prilikom unosa podataka od strane korisnika:

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)

I zatim vratimo u komponenti markup sa naslovom i praznom formom:

return (
	<div>
		<h2>Dodaj novi proizvod</h2>
		<form>
		</form>
	</div>
)

Otvorite vašu aplikaciju sa studentima. Kreirajte fajl NewStudentForm.jsx u folderu students. Zavedite u komponenti NewStudentForm lokalna stanja za neophodna vam polja, napišite za svako polje obradu, kao što je prikazano na lekciji.

Vratite u komponenti NewStudentForm markup koji sadrži naslov i praznu formu.