Lägga till information om säljare i Redux

Vi har tidigare talat om att våra produkter faktiskt läggs till i applikationen av säljare. Låt oss när vi lägger till en ny produkt visa information om säljaren.

Öppna vår produktapplikation, och i den filen productsSlice.js. Låt oss skicka in ytterligare en parameter i prepare, vi kallar den sellerId och sätter den sedan för payload i actionen. Nu kommer vår koddel för prepare att se ut så här:

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

Nu behöver vi göra en rad ändringar i filen med formuläret för att lägga till produkt NewProductForm.jsx. Låt oss först lägga till ytterligare ett lokalt state för säljarens id:

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

Sedan, efter deklarationen av variabeln dispatch för useDispatch, lägger vi till kod för att hämta säljarslicen från statet med hjälp av hooken useSelector:

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

I hanterarna för inmatningsfälten lägger vi till en till:

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

Vi justerar onSaveProductClick genom att lägga till sellerId för actionen productAdded:

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

Öppna din studentapplikation. Lägg till möjlighet att ange information om läraren som lade till studenterna. För att göra detta, studera materialet i lektionen och gör ändringar för funktionen prepare i filen studentsSlice.js.

Gör motsvarande ändringar i filen NewStudentForm.jsx