Přidání informací o prodejci do Reduxu

Mluvili jsme o tom, že naše produkty jsou do aplikace vlastně přidávány prodejci. Pojďme při přidání nového produktu zobrazit informace o prodejci.

Otevřeme naši aplikaci s produkty, a v ní soubor productsSlice.js. Pojďme předat do prepare ještě jeden parametr, nazveme ho sellerId a nastavme ho dále pro payload akce. Nyní bude náš kousek kódu pro prepare vypadat takto:

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

Nyní potřebujeme provést řadu změn v souboru s formulářem pro přidání produktu NewProductForm.jsx. Nejprve přidejme ještě jeden lokální stav pro id prodejce:

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

Poté po deklaraci proměnné dispatch pro useDispatch, přidejme kód pro získání slicu prodejců ze stavu pomocí hooku useSelector:

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

Do obslužných rutin pro vstupní pole přidejme ještě jednu:

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

Upravme onSaveProductClick, přidáním pro akci productAdded ještě i sellerId:

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

Otevřete vaši aplikaci se studenty. Přidejte možnost zadání informací o učiteli, který studenty přidal. Pro to, po prostudování materiálu lekce, proveďte změny pro funkci prepare v souboru studentsSlice.js.

Proveďte odpovídající změny v souboru NewStudentForm.jsx