Redux'те сатуучунун маалыматын кошуу

Биз сиздер менен биздин продукталарыбыз иш жүзүндө сатуучулар тарабынан колдонмого кошулары жөнүндө сүйлөшкөнбүз. Келгиле жаңы продукт кошууда сатуучу жөнүндө маалыматты чыгаралы.

Продукталар менен колдонмобузду ачалы, анын ичиндеги productsSlice.js файлын. Келгиле prepare функциясына дагы бир параметр өткөрөлү, аны sellerId деп атайлы жана андан кийин экшендин payload үчүн коёлу. Эми биздин prepare үчүн код бөлүгү төмөнкүдөй болот:

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

Эми бизге продукт кошуу үчүн формасы бар файлда NewProductForm.jsx бир катар өзгөртүүлөр киргизүү керек. Башында сатуучунун id'sи үчүн дагы бир локалдык стейт кошолу:

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

Андан кийин useDispatch үчүн dispatch өзгөрмөсүн жарыялагандан кийин, стейттен сатуучулар слайсын алуу үчүн useSelector хукун колдонуп код кошолу:

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

Маалымат киргизүү талааларынын иштеткичтерине дагы бир кошолу:

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

productAdded экшени үчүн sellerId кошуп, onSaveProductClick'ты оңдолу:

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

Студенттер менен колдонмонузду ачыңыз. Студенттерди кошкон окутуучу жөнүндө маалымат киргизүү мүмкүнчүлүгүн кошуңуз. Бул үчүн, сабактын материалын изилдеп, studentsSlice.js файлындагы prepare функциясы үчүн өзгөртүүлөрдү киргизиңиз.

NewStudentForm.jsx файлына тиешелүү өзгөртүүлөрдү киргизиңиз