Формҳо ва ҳолатҳои маҳаллӣ дар 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)

Ва сипас дар компонент верстаро бо sarlavha ва форми холӣ баргардонем:

return (
	<div>
		<h2>Add a New Product</h2>
		<form>
		</form>
	</div>
)

Барномаи худро бо донишҷӯён кушоед. Файли NewStudentForm.jsx эҷод кунед дар папкаи students. Дар компоненти NewStudentForm ҳолатҳои маҳаллиро барои майдонҳои зарурии худ муқаррар кунед, барои ҳар як майдон коркард нависед, тавре ки дар дарс нишон дода шуд.

Дар компоненти NewStudentForm верстаеро баргардонед, ки дорои sarlavha ва форми холӣ бошад.