Pārdevēja informācijas pievienošana Redux

Mēs runājām par to, ka mūsu produktus faktiski pievieno pārdevēji. Pievienojot jaunu produktu, parādīsim informāciju par pārdevēju.

Atveriet mūsu produktu lietotni, un tajā failu productsSlice.js. Padomāsim par to, lai prepare padotos vēl viens parametrs, sauksim to par sellerId un iestatīsim to tālāk payload ekšenam. Tagad mūsu prepare koda fragments būs šāds:

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

Tagad mums ir jāveic vairākas izmaiņas failā ar formu produkta pievienošanai NewProductForm.jsx. Sākumā pievienosim vēl vienu lokālo stāvokli pārdevēja id:

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

Tad pēc mainīgā dispatch deklarēšanas priekš useDispatch, pievienosim kodu pārdevēju slaisa iegūšanai no stāvokļa, izmantojot āķi useSelector:

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

Ievades lauku apstrādātājiem pievienosim vēl vienu:

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

Labosim onSaveProductClick, pievienojot ekšenam productAdded arī sellerId:

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

Atveriet savu studentu lietotni. Pievienojiet iespēju ievadīt informāciju par pasniedzēju, kurš pievienoja studentus. Lai to izdarītu, izpētot nodarbības materiālu, veiciet izmaiņas funkcijai prepare failā studentsSlice.js.

Veiciet atbilstošās izmaiņas failā NewStudentForm.jsx