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 компонентинде ат коштолгон жана бош форманы камтыган верстканы кайтарыңыз.