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>Янги Махсулот Кўшиш</h2>
		<form>
		</form>
	</div>
)

Сизнинг талабалар билан иловангизни очинг. students папкасида NewStudentForm.jsx файлини яратинг. NewStudentForm компонентида сизга керак бўлган майдонлар учун локал стейтларни киритинг, ҳар бир майдон учун дарсда кўрсатилгани каби ишловни ёзинг.

NewStudentForm компонентида сарлавҳа ва бўш шаклни ўз ичига олган версткани қайтаринг.