Action küldése és a useDispatch hook a Redux-ban

Gyakorlatilag minden alkotóelemet megvalósítottunk a Redux alkalmazás működéséhez. Már csak az action komponensből történő küldését kell megértenünk. Lássuk hozzá.

Nyissa meg a termékek alkalmazásunkat. A NewProductForm komponens űrlapjában van egy gomb az új termék adatainak megmentésére. Rendeljünk hozzá egy kattintáskezelőt. Kattintáskor aktiválódjon a onSaveProductClick kezelő:

products/NewProductForm.jsx<button type="button" onClick={onSaveProductClick}>
  save
</button>

Új termék létrehozásakor szükségünk lesz egy új id-re. Egy jól ismert könyvtár, az nanoid segítségével fogjuk generálni. Egyébként nem kell telepíteni, mivel már jön az RTK csomaggal. Adjuk hozzá a nanoid-t az importokhoz:

products/NewProductForm.jsximport { nanoid } from '@reduxjs/toolkit'

Emlékezzünk, hogy az egyetlen módja a state megváltoztatásának - a dispatch metódus meghívása, ami a store-ban található, és átadni egy action objektumot. Ahhoz, hogy hozzáférjünk ehhez a metódushoz, mi a React-Redux useDispatch hook-ot fogjuk használni. Importáljuk ezt is:

products/NewProductForm.jsximport { useDispatch } from 'react-redux'

A NewProductForm függvény kódjában hozzunk létre egy konstans dispatch változót, rögtön azután, hogy létrehoztuk a lokális state-ekhez tartozó konstansokat:

products/NewProductForm.jsxconst dispatch = useDispatch()

Szükséges továbbá importálnunk a productAdded action creatort, amit az előző leckén kaptunk:

products/NewProductForm.jsximport { productAdded } from './productsSlice'

Most már megírhatjuk magát a onSaveProductClick kezelőfüggvényt. Tegyük ezt a return parancs elé:

products/NewProductForm.jsxconst onSaveProductClick = () => {}

A függvényben meghívjuk a dispatch-t, létrehozzuk az action objektumot, amelynek payload tulajdonságába kerülnek a generált id, a név, leírás, ár és mennyiség. Ezeket az adatokat a lokális state-ekből vesszük. Ezzel párhuzamosan egy feltétellel ellenőrizzük, hogy minden mező ki van-e töltve - csak ebben az esetben hívjuk meg a dispatch-t. A függvény végén visszaállítjuk a lokális state-eket az eredeti állapotba:

products/NewProductForm.jsxconst onSaveProductClick = () => {
  if (name && desc && price && amount) {
    dispatch(
      productAdded({
        id: nanoid(),
        name,
        desc,
        price,
        amount
      })
    )

    setName('')
    setDesc('')
    setPrice(0)
    setAmount(0)
  }
}

Most indítsuk el az alkalmazásunkat, írjunk be adatokat az űrlap mezőibe, és nyomjuk meg a mentés gombot. Hurrá, alul az oldalon megjelent egy új termék. A Redux DevTools megnyitásakor, és benne az Inspector fülön látjuk, hogy baloldalon a @@INIT mellett megjelent a mi action-ünk is, a products/productAdded. A jobb oldali részen rákattinthatunk az Action és State fülekre, váltogatva közben a @@INIT és a products/productAdded között. Most látjuk, hogy az új termék hozzáadódik. Továbbá az Action fülön látjuk az action-t, amit automatikusan generált a createSlice (kattintsunk például a Raw-ra). Hurrá: nem kellett kézzel megírnunk.