Ձևեր և լոկալ սթեյթեր Redux-ում

Նախորդ դասերում մենք սովորեցինք ստանալ տվյալներ store-ից և արտածել դրանք React կոմպոնենտում: Այս դասին մենք կսկսենք ավելացնել նոր տվյալներ: Մենք դա կանենք օգտագործելով ձև, լրացնելով որը, վաճառողը կկարողանա ավելացնել նոր ապրանք:

Սկսենք նրանից, որ միշտ չէ, որ իմաստ ունի օգտագործել Redux-ի գլոբալ սթեյթը: Լինում են դեպքեր, երբ մենք մեր կարիքների համար կարող ենք ստեղծել լոկալ սթեյթեր: Լոկալ սթեյթերով մենք կանվանենք սթեյթերը, որոնք օգտագործվում են կոնկրետ կոմպոնենտի ներսում տեխնիկական կարիքների համար: Օրինակ, որևէ բան կոճակով թաքցնելու կամ ցույց տալու համար:

Մեր դեպքում օգտագործողը կմուտքագրի տվյալներ ձևի մեջ և, բնականաբար, դրա համար մեզ պետք կգան սթեյթեր: Կարելի էր օգտվել Redux-ի գլոբալ սթեյթից, սակայն դրա մեջ իմաստ չկա, քանի որ մեր սթեյթերը կաշխատեն միայն հավելվածի մեկ տեղում՝ ապրանք ավելացնելու ձևի համար: Հիմնական կանոնը, որին պետք է հետևել դրանով - չի կարելի, որ լոկալ սթեյթերն աշխատեն կոմպոնենտի սահմաններից դուրս, որում դրանք ստեղծվել են, և ոչ մի դեպքում չդիպչեն store-ին: Նման պրակտիկան հաճախ օգտագործվում է ձևեր ստեղծելիս:

Եկեք բացենք products պանակը մեր ապրանքներով հավելվածի, ստեղծենք դրա մեջ NewProductForm.jsx ֆայլը և իմպորտ անենք դրա մեջ useState հուքը:

products/NewProductForm.jsximport { useState } from 'react'

Այժմ ստեղծենք բուն կոմպոնենտը ձևով և գրենք դրա մեջ սովորական սթեյթեր, ինչպես մենք դա արել էինք նախկինում React-ում: Մեզ պետք են սթեյթեր անվանման, նկարագրության, գնի և ապրանքի քանակի հետ աշխատելու համար:

products/NewProductForm.jsxexport const NewProductForm = () => {
  const [name, setName] = useState('')
  const [desc, setDesc] = useState('')
  const [price, setPrice] = useState(0)
  const [amount, setAmount] = useState(0)
}

Հաջորդիվ ավելացնենք ստանդարտ մշակում յուրաքանչյուր դաշտի համար, երբ օգտագործողը մուտքագրում է տվյալներ:

products/NewProductForm.jsxconst 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)

Եվ ապա վերադարձնենք կոմպոնենտում վերստքը՝ վերնագրով և դատարկ ձևով:

products/NewProductForm.jsxreturn (
  <div>
    <h2>Add a New Product</h2>
    <form>
    </form>
  </div>
)