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