Ձևեր և լոկալ սթեյթեր 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>
)

Բացեք ձեր ուսանողներով հավելվածը: Ստեղծեք NewStudentForm.jsx ֆայլը պանակում students: Ստեղծեք NewStudentForm կոմպոնենտում լոկալ սթեյթեր ձեզ անհրաժեշտ դաշտերի համար, գրեք յուրաքանչյուր դաշտի համար մշակում, ինչպես ցույց է տրված դասում:

Վերադարձրեք NewStudentForm կոմպոնենտում վերստքը, որը պարունակում է վերնագիր և դատարկ ձև: