Myyjän tiedon lisääminen Reduxiin

Puhuimme siitä, että tuotteemme todellisuudessa lisäävät myyjät sovellukseen. Annetaan uuden tuotteen lisäämisessä näyttää myyjän tiedot.

Avataan tuotesovelluksemme, ja siellä tiedosto productsSlice.js. Annetaan kuljettaa prepare:een vielä yksi parametri, nimetään se sellerId ja asetetaan se edelleen payload:ille. Nyt meidän prepare:n koodinpala tulee olemaan tällainen:

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

Nyt meidän täytyy tehdä useita muutoksia tiedostoon lomakkeen kanssa tuotteen lisäämiseksi NewProductForm.jsx. Aluksi lisätään vielä yksi paikallinen tila myyjän id:lle:

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

Sitten muuttujan dispatch määrittelyn jälkeen useDispatch:lle, lisätään koodi myyjien siiven saamiseksi tilasta useSelector -hookin avulla:

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

Syötekenttien käsittelijöihin lisätään vielä yksi:

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

Korjataan onSaveProductClick, lisäämällä toimintoon productAdded myös sellerId:

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

Avaa opiskelijasovelluksesi. Lisää mahdollisuus opettajan tiedon syöttämiseen, joka lisäsi opiskelijat. Tätä varten, tutkittuaan oppitunnin materiaalin, tee muutoksia funktioon prepare tiedostossa studentsSlice.js.

Tee asianmukaiset muutokset tiedostoon NewStudentForm.jsx