გამყიდველის ინფორმაციის დამატება 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-სთვის:

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))

გახსენით თქვენი აპლიკაცია სტუდენტებით. დაამატეთ შესაძლებლობა ️ლექტორის ინფორმაციის შეყვანის, რომელმაც დაამატა სტუდენტები. ამისთვის, გაკვეთილის მასალის შესწავლის შემდეგ, შეიტანეთ ცვლილებები ფუნქციაში prepare ფაილში studentsSlice.js.

შეიტანეთ შესაბამისი ცვლილებები ფაილში NewStudentForm.jsx