Pridanie informácií o predajcovi do Reduxu

Hovorili sme si o tom, že naše produkty sa do aplikácie pridávajú predajcami. Poďme pri pridávaní nového produktu zobraziť informácie o predajcovi.

Otvorte našu aplikáciu s produktmi, a v nej súbor productsSlice.js. Poďme odovzdať do prepare ešte jeden parameter, nazvime ho sellerId a nastavme ho následne pre payload akcie. Teraz náš kúsok kódu pre prepare bude takýto:

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

Teraz musíme vykonať rad zmien v súbore s formulárom na pridanie produktu NewProductForm.jsx. Najprv pridajme ďalší lokálny stav pre id predajcu:

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

Potom po deklarácii premennej dispatch pre useDispatch, pridajme kód na získanie slice predajcov zo stavu pomocou hooku useSelector:

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

Do handlerov pre vstupné polia pridajme ďalší:

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

Upravme onSaveProductClick, pridaním akcie productAdded ešte aj sellerId:

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

Otvorte vašu aplikáciu so študentmi. Pridajte možnosť zadania informácií o učiteli, ktorý pridal študentov. Preto, po preštudovaní materiálu lekcie, vykonajte zmeny pre funkciu prepare v súbore studentsSlice.js.

Vykonajte zodpovedajúce zmeny v súbore NewStudentForm.jsx