Hinzufügen von Verkäuferinformationen in Redux

Wir haben darüber gesprochen, dass unsere Produkte tatsächlich von Verkäufern zur Anwendung hinzugefügt werden. Lassen Sie uns beim Hinzufügen eines neuen Produkts auch Informationen über den Verkäufer ausgeben.

Öffnen wir unsere Produktanwendung, darin die Datei productsSlice.js. Lassen Sie uns an prepare noch einen Parameter übergeben, nennen wir ihn sellerId und setzen ihn anschließend für die payload der Action. Nun wird unser Codeausschnitt für prepare so aussehen:

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

Nun müssen wir eine Reihe von Änderungen in der Datei mit dem Formular zum Hinzufügen von Produkten NewProductForm.jsx vornehmen. Fügen wir zunächst einen weiteren lokalen State für die Verkäufer-ID hinzu:

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

Dann, nach der Deklaration der Variable dispatch für useDispatch, fügen wir Code zum Abrufen des Verkäufer-Slices aus dem State mithilfe des Hooks useSelector hinzu:

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

Zu den Event-Handlern für die Eingabefelder fügen wir einen weiteren hinzu:

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

Passen wir onSaveProductClick an, indem wir der Action productAdded auch sellerId hinzufügen:

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

Öffnen Sie Ihre Studentenanwendung. Fügen Sie die Möglichkeit hinzu, Informationen über den Dozenten, der die Studenten hinzugefügt hat, zu erfassen. Nehmen Sie dazu, nachdem Sie den Unterrichtsstoff durchgearbeitet haben, Änderungen an der Funktion prepare in der Datei studentsSlice.js vor.

Nehmen Sie die entsprechenden Änderungen in der Datei NewStudentForm.jsx vor.