Az action objektum adatainak előkészítése Redux-ban

Nemrég arról beszéltünk, hogy a createSlice függvény egy argumentumot vár a action.payload létrehozásakor. Ez egyrészt leegyszerűsíti a használatát, másrészt viszont további lépésekhez vezethet az action objektum tartalmának előkészítése érdekében.

Nyissuk meg a termékek alkalmazásunkat, és benne a NewProductForm.jsx fájlt. Figyeljük meg a következő kódsort:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Itt közvetlenül a React komponensben állítjuk össze a payload objektumot, és adjuk át a productAdded action-nek. Mi van, ha ugyanezt az actiont több komponensből is el kell küldenünk, vagy ha az összeállítási logika bonyolulttá válik? Elvileg a komponensünket nem kellene érdekelnie, hogy hogyan néz ki a payload objektum ehhez az actionhez. Ráadásul a kód állandó ismétlése sem elfogadható számunkra.

Ezeket a problémákat ismét a híres createSlice segíthet megoldani, mivel a reducer írásakor lehetővé teszi számunkra a prepare callback függvény használatát, amelyben különböző logikát írhatunk, véletlenszámokat generálhatunk és így tovább. Ebben az esetben a reducer mező értéke a következő objektum formájában is megadható:

{reducer, prepare}

Nyissuk meg a productsSlice.js fájlt, és módosítsuk a productAdded reducer kódját. Most ez a kódrészlet:

productAdded(state, action) {
	state.push(action.payload)
},

Ezt fogjuk megváltoztatni a következőre, amelyben a reducer függvény a store állapotának frissítéséért felelős, a prepare pedig visszaadja a payload objektumot a generált id-val és egyéb adatainkkal:

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

Mivel most már itt generáljuk az id-t, és nem a komponensben, adjuk hozzá a nanoid-ot az importokhoz:

import { createSlice, nanoid } from '@reduxjs/toolkit'

Végül végezzük el a módosításokat a NewProductForm.jsx fájlban. A következő sor helyett:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

Ez lesz, ahol egyszerűen vesszővel elválasztva átadjuk a szükséges adatokat (ne felejtsük el ebben a fájlban eltávolítani a nanoid-ot az importokból):

dispatch(productAdded(name, desc, price, amount))

Indítsuk el az alkalmazást, majd hozzunk létre egy új terméket, és győződjünk meg arról, hogy nem rontottunk el semmit.

Nyissa meg a diákok alkalmazását. A StudentsSlice.js fájlban írja át a studentAdded reducerét úgy, hogy {reducer, prepare} objektum formájában legyen, ahogyan az a leckében is látható.

Végezze el a szükséges módosításokat a NewStudentForm.jsx fájlban, ahogyan az a leckében látható. Indítsa el az alkalmazást, és győződjön meg arról, hogy minden ugyanúgy működik, mint korábban.