Dodawanie informacji o sprzedawcy w Redux

Rozmawialiśmy o tym, że nasze produkty faktycznie są dodawane do aplikacji przez sprzedawców. Dodajmy przy dodawaniu nowego produktu wypisywanie informacji o sprzedawcy.

Otwórzmy naszą aplikację z produktami, a w niej plik productsSlice.js. Dodajmy przekazywanie do prepare jeszcze jednego parametru, nazwijmy go sellerId i ustawmy go następnie dla payload akcji. Teraz nasz fragment kodu dla prepare będzie wyglądał tak:

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

Teraz musimy wprowadzić szereg zmian w pliku z formularzem dodawania produktu NewProductForm.jsx. Na początek dodajmy jeszcze jeden stan lokalny dla id sprzedawcy:

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

Następnie po deklaracji zmiennej dispatch dla useDispatch, dodajmy kod do pobrania slice'a sprzedawców ze stanu przy użyciu hooka useSelector:

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

Do handlerów pól wprowadzania dodajmy jeszcze jeden:

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

Poprawmy onSaveProductClick, dodając dla akcji productAdded także sellerId:

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

Otwórz twoją aplikację ze studentami. Dodaj możliwość wprowadzania informacji o wykładowcy, który dodał studentów. W tym celu, po zapoznaniu się z materiałem lekcji, wprowadź zmiany dla funkcji prepare w pliku studentsSlice.js.

Wprowadź odpowiednie zmiany w pliku NewStudentForm.jsx