Tilføjelse af oplysninger om sælger i Redux

Vi har tidligere talt om, at vores produkter faktisk tilføjes til applikationen af sælgere. Lad os ved tilføjelse af et nyt produkt vise oplysninger om sælgeren.

Åbn vores applikation med produkter, og i den filen productsSlice.js. Lad os overføre til prepare en ekstra parameter, vi kalder den sellerId og sætter den derefter for payload handlingen. Nu vil vores stykke kode for prepare se sådan ud:

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

Nu er vi nødt til at foretage en række ændringer i filen med formularen til tilføjelse af produkt NewProductForm.jsx. Til at starte med tilføjer vi endnu en lokal state for sælgerens id:

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

Derefter efter deklarationen af variablen dispatch for useDispatch, tilføjer vi kode for at hente sælger-slice'et fra staten ved hjælp af hook'et useSelector:

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

Til håndteringerne for inputfelter tilføjer vi endnu en:

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

Vi justerer onSaveProductClick ved at tilføje for handlingen productAdded også sellerId:

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

Åbn din applikation med studerende. Tilføj mulighed for at indtaste oplysninger om den underviser, som tilføjede de studerende. For at gøre dette, efter at have studeret lektionens materiale, foretag ændringer for funktionen prepare i filen studentsSlice.js.

Foretag de tilsvarende ændringer i filen NewStudentForm.jsx