Форме и локална стања у Redux-у

У претходним лекцијама научили смо да узимамо податке из store-а и да их приказујемо у React компоненти. На овој лекцији ћемо приступити додавању нових података. То ћемо радити помоћу форме, коју попуњавајући, продавац ће моћи да дода нови производ.

Почнимо чињеницом да нема увек смисла користити глобално Redux стање. Постоје случајеви када можемо за наше потребе да креирамо локална стања. Локалним стањима ћемо називати стања која се користе унутар одређене компоненте за техничке потребе. На пример, да бисмо нешто скрили или приказали помоћу дугмета.

У нашем случају корисник ће уносити податке у форму и, наравно, потребна ће нам стати за то. Могли бисмо да користимо глобално Redux стање, али у томе нема смисла, јер ће наша стања радити само на једном месту у апликацији за форму додавања производа. Главно правило које при томе треба да следимо је - не сме, да локална стања раде изван компоненте у којој су креирана, и ни у ком случају да не додирују store. Таква пракса се често користи при креирању форми.

Хајде да отворимо фасциклу products наше апликације са производима, креирајмо у њој фајл NewProductForm.jsx и увезимо у њега hook useState:

import { useState } from 'react'

Сада креирајмо саму компоненту са формом и напишимо у њој обична стања, као што смо то раније радили у React-у. Потребна су нам стати за рад са називом, описом, ценом и количином производа:

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

Затим додајмо стандардну обраду за свако поље при уносу података од стране корисника:

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)

И онда вратимо у компоненти верстку са насловом и празном формом:

return (
	<div>
		<h2>Додај нови производ</h2>
		<form>
		</form>
	</div>
)

Отворите вашу апликацију са студентима. Креирајте фајл NewStudentForm.jsx у фасцикли students. Направите у компоненти NewStudentForm локална стања за потребна вам поља, напишите за свако поље обраду, као што је приказано на лекцији.

Вратите у компоненти NewStudentForm верстку, која садржи наслов и празну форму.