Формы і лакальныя стэйты ў Redux

У мінулых уроках мы навучыліся атрымліваць дадзеныя з store і выводзіць іх у React кампаненце. На гэтым уроке мы прыступім да дадання новых дадзеных. Рабіць мы гэта будзем пры дапамозе формы, запоўніўшы якую, прадавец зможа дадаць новы прадукт.

Пачнем з таго, што не заўсёды ёсць сэнс выкарыстоўваць глабальны стэйт Redux. Бываюць выпадкі, калі мы пад нашы патрэбы можам ствараць лакальныя стэйты. Лакальнымі стэйтамі мы будзем называць стэйты, якія выкарыстоўваюцца ўнутры пэўнага кампанента для тэхнічных патрэб. Напрыклад, каб схаваць ці паказаць нешта па кнопцы.

У нашым выпадку карыстальнік будзе ўводзіць дадзеныя ў форму і, натуральна, нам спатрэбяцца для гэтага стэйты. Можно было б скарыстацца глабальным Redux стэйтам, але ў гэтым няма сэнсу, паколькі нашы стэйты будуць працаваць толькі ў адным месцы прыкладання для формы дадання прадукта. Галоўнае правіла, якому пры гэтым трэба ісці ўслед - нельга, каб лакальныя стэйты працавалі за межамі кампанента, у якім яны створаны, і ні ў якім выпадку не тыкаліся да store. Такая практыка часта выкарыстоўваецца пры стварэнні формаў.

Давайце адчынем папку products нашага прыкладання з прадуктамі, створым у ёй файл NewProductForm.jsx і імпартыруем у яго хук 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>Add a New Product</h2>
		<form>
		</form>
	</div>
)

Адчынiце ваша прыкладанне са студэнтамі. Стварыце файл NewStudentForm.jsx у папцы students. Завядзiце ў кампаненце NewStudentForm лакальныя стэйты для неабходных вам палёў, напішыце для кожнага поля апрацоўку, як паказана ў уроку.

Верніце ў кампаненце NewStudentForm верстку, якая змяшчае загаловак і пустую форму.