Toevoegen van verkoperinformatie in Redux

We hebben eerder besproken dat onze producten feitelijk door verkopers aan de applicatie worden toegevoegd. Laten we bij het toevoegen van een nieuw product informatie over de verkoper tonen.

Open onze productenapplicatie, en daarin het bestand productsSlice.js. Laten we een extra parameter doorgeven aan prepare, noem deze sellerId en stel deze vervolgens in voor de payload van de actie. Nu wordt ons stukje code voor prepare als volgt:

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

Nu moeten we een aantal wijzigingen aanbrengen in het bestand met het formulier voor het toevoegen van een product NewProductForm.jsx. Laten we eerst een extra lokale state toevoegen voor de id van de verkoper:

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

Voeg dan, na de declaratie van de variabele dispatch voor useDispatch, code toe om de slice van verkopers uit de state te halen met behulp van de hook useSelector:

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

Voeg aan de handlers voor de invoervelden nog een toe:

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

Passen we onSaveProductClick aan, door voor de actie productAdded ook sellerId toe te voegen:

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

Open je applicatie met studenten. Voeg de mogelijkheid toe om informatie in te voeren over de docent die de studenten heeft toegevoegd. Breng hiertoe, na bestudering van de lesstof, wijzigingen aan voor de functie prepare in het bestand studentsSlice.js.

Breng de betreffende wijzigingen aan in het bestand NewStudentForm.jsx