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ő:

<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:

import { 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:

import { 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:

const dispatch = useDispatch()

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

import { productAdded } from './productsSlice'

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

const 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:

const 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.

Nyissa meg a diákok alkalmazását, majd a NewStudentForm.jsx fájlt, rendeljen a mentés gombhoz kattintáskezelőt.

Írja be az összes szükséges importot és írja meg a onSaveStudentClick kezelőfüggvényt, alkalmazva a dispatch metódust a leckében bemutatottak szerint.

Indítsa el az alkalmazást, írjon be adatokat az űrlap mezőibe és kattintson a mentés gombra. Győződjön meg róla, hogy alul az oldalon hozzáadódott egy új diák.

Nyissa meg a Redux DevTools-t és lépkedjen végig az Action és State füleken, győződjön meg arról, hogy az új diák objektum hozzáadódik. Nézze meg az action objektumot, ami létrejött, és küldje el a válaszában erre a feladatra.