การเพิ่มข้อมูลผู้ขายใน 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 โดยเพิ่ม sellerId ให้กับแอ็กชัน productAdded ด้วย:

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

เปิดแอปพลิเคชันนักเรียนของคุณ เพิ่มความสามารถในการป้อนข้อมูล เกี่ยวกับอาจารย์ผู้เพิ่มนักเรียน ในการนี้ หลังจากศึกษาบทเรียนแล้ว ให้ทำ การเปลี่ยนแปลงสำหรับฟังก์ชัน prepare ในไฟล์ studentsSlice.js

ทำการเปลี่ยนแปลงที่เกี่ยวข้องใน ไฟล์ NewStudentForm.jsx