Eladó információinak hozzáadása a Redux-hoz

Beszéltünk arról, hogy a termékeinket valójában az eladók adják hozzá az alkalmazáshoz. Adjunk meg az új termék hozzáadásakor információt az eladóról.

Nyissuk meg a termékalkalmazásunkat, és benne a productsSlice.js fájlt. Adjunk át a prepare-nak még egy paramétert, nevezzük el sellerId-nek és állítsuk be azt a payload számára. Most a prepare kódrészlete így fog kinézni:

prepare(name, desc, price, amount, sellerId) {
	return {
		payload: {
			id: nanoid(),
			name,
			desc,
			price,
			amount,
			seller: sellerId,
		},
	}
},

Most egy sor módosítást kell végrehajtanunk a termék hozzáadására szolgáló űrlap fájljában NewProductForm.jsx. Először adjunk hozzá még egy lokális állapotot az eladó azonosítójához:

const [sellerId, setSellerId] = useState('')

Ezután a dispatch változó deklarálása után a useDispatch számára, adjuk hozzá a kódot az eladók szeletének lekéréséhez az állapotból a useSelector hook segítségével:

const sellers = useSelector((state) => state.sellers)

A beviteli mezők kezelőihez adjunk hozzá még egyet:

const onSellerChanged = (e) => setSellerId(e.target.value)

Javítsuk a onSaveProductClick-ot, úgy hogy a productAdded action számára hozzáadjuk a sellerId-t is:

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

Nyissa meg a diák alkalmazását. Adja hozzá a lehetőséget az oktató információinak megadására, aki hozzáadta a diákokat. Ehhez, a lecke anyagának tanulmányozása után, hajtson végre módosításokat a prepare függvény számára a studentsSlice.js fájlban.

Hajtsa végre a szükséges módosításokat a NewStudentForm.jsx fájlban