Προσθήκη πληροφοριών πωλητή στο Redux

Μιλήσαμε νωρίτερα για το γεγονός ότι τα προϊόντα μας προστίθενται στην εφαρμογή από πωλητές. Ας προβάλουμε πληροφορίες για τον πωλητή κατά την προσθήκη ενός νέου προϊόντος.

Ανοίξτε την εφαρμογή προϊόντων μας, και σε αυτή το αρχείο productsSlice.js. Ας μεταβιβάσουμε στο prepare μια ακόμη παράμετρο, ας την ονομάσουμε sellerId και ας την ορίσουμε στη συνέχεια για το payload της ενέργειας. Τώρα το κομμάτι κώδικα για το prepare θα είναι ως εξής:

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

Τώρα πρέπει να κάνουμε μια σειρά αλλαγών στο αρχείο της φόρμας για προσθήκη προϊόντος NewProductForm.jsx. Αρχικά, ας προσθέσουμε μια ακόμη τοπική κατάσταση για το id του πωλητή:

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

Στη συνέχεια, μετά τη δήλωση της μεταβλητής dispatch για το useDispatch, ας προσθέσουμε κώδικα για τη λήψη της τομής των πωλητών από την κατάσταση χρησιμοποιώντας το hook useSelector:

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

Στους χειριστές για τα πεδία εισαγωγής, ας προσθέσουμε έναν ακόμη:

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

Ας τροποποιήσουμε το onSaveProductClick, προσθέτοντας στην ενέργεια productAdded και το sellerId:

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

Ανοίξτε την εφαρμογή σας με τους φοιτητές. Προσθέστε τη δυνατότητα εισαγωγής πληροφοριών για τον καθηγητή που πρόσθεσε τους φοιτητές. Για αυτό, μελετώντας το υλικό του μαθήματος, κάντε αλλαγές για τη συνάρτηση prepare στο αρχείο studentsSlice.js.

Κάντε τις αντίστοιχες αλλαγές στο αρχείο NewStudentForm.jsx