Reduxда сотиувчи ҳақида маълумот қўшиш

Биз сизлар билан маҳсулотларимиз аслан дастурга сотиувчилар томонидан қўшилаётгани ҳақида гапирдик. Келинг янги маҳсулот қўшганда сотиувчи ҳақида маълумот чиқарамиз.

Маҳсулотлар билан ишлайдиган дастуримизни ochamiz, ундаги productsSlice.js файлини ochamiz. Келинг prepare-га яна бита параметр ўтказамиз, уни sellerId деб атаймиз ва кейин payload экшени учун ўрнатамиз. Энди бизнинг prepare учун код ибирагича бўлади:

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

Энди бизга маҳсулот қўшиш учун форма NewProductForm.jsx файлида бир қанча ўзгартиришлар киритиш керак. Аввало янги локал стейт қўшамиз сотиувчи idси учун:

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

Кейин dispatch ўзгарувчиси useDispatch учун эълон килингандан сўнг, useSelector хуки орқали стейтдан сотиувчилар слайсини олиш учун код қўшамиз:

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

Киргизиш майдонлари учун ишловчиларга яна битта қўшамиз:

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

onSaveProductClick-ни тўғрилаб, унга productAdded экшени учун sellerId-ни ҳам қўшамиз:

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

Сизнинг ўқувчилар билан ишлайдиган дастурингизни oching. Уқитувчи ҳақида маълумот киритиш имконини қўшинг, у қандай килиб ўқувчиларни қўшган. Бунинг учун, дарслик материалларини ўрганиб, studentsSlice.js файлидаги prepare функсияси учун ўзгартиришлар киритинг.

Мос ўзгартиришларни NewStudentForm.jsx файлида киритинг