Űrlapok és lokális állapotok a Redux-ban

A korábbi leckéken megtanultuk, hogyan kell adatokat kinyerni a store-ból és megjeleníteni azokat egy React komponensben. Ezen a leckén átmegyünk az új adatok hozzáadására. Ezt egy űrlap segítségével fogjuk megtenni, amelynek kitöltésével az eladó hozzáadhat egy új terméket.

Kezdjük azzal, hogy nem mindig van értelme a Redux globális állapotának használatának. Vannak esetek, amikor a saját igényeinkre lokális állapotokat hozhatunk létre. Lokális állapotoknak nevezzük azokat az állapotokat, amelyeket egy adott komponensen belül használunk technikai igényekre. Például, hogy elrejtsünk vagy megjelenítsünk valamit egy gombra kattintva.

Esetünkben a felhasználó adatokat fog bevinni egy űrlapba, és természetesen ehhez állapotokra lesz szükségünk. Használhatnánk a globális Redux állapotot is, de ennek nincs értelme, mivel az állapotaink csak egy helyen, a termék hozzáadására szolgáló űrlapnál fognak működni az alkalmazáson belül. A fő szabály, amit követni kell - a lokális állapotok nem dolgozhatnak azon komponensen kívül, amelyben létre lettek hozva, és semmiképpen sem érinthetik a store-t. Ez a gyakorlat gyakran alkalmazott az űrlapok létrehozásánál.

Nyissuk meg a products mappánkat a termék alkalmazásunkban, hozzunk létre benne egy NewProductForm.jsx fájlt és importáljuk bele a useState hook-ot:

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

Most hozzuk létre magát a komponenst az űrlappal és írjunk bele szokásos állapotokat, ahogyan korábban tettük a React-ban. Állapotokra van szükségünk a termék nevével, leírásával, árával és mennyiségével való munkavégzéshez:

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

Ezután adjuk hozzá a szabványos feldolgozást minden egyes mezőhöz, amikor a felhasználó adatokat ír be:

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)

Majd a komponensben adjuk vissza a felületet címmel és egy üres űrlappal:

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