การเปลี่ยนแปลงข้อมูลผลิตภัณฑ์ใน Redux store

เราได้เรียนรู้วิธีการเพิ่มผลิตภัณฑ์แล้ว แต่ถ้าเราต้องการเปลี่ยนแปลงข้อมูลเกี่ยวกับผลิตภัณฑ์ล่ะ? มาดูกันว่าจะทำได้อย่างไรในบทเรียนนี้และบทเรียนต่อๆ ไป

มาเปิดแอปพลิเคชันผลิตภัณฑ์ของเราและเข้าไปที่ไฟล์ productsSlice.js เริ่มต้นด้วยการที่เราต้องเขียน reducer อีกตัวสำหรับ slice products ซึ่งจะทำงานเมื่อมีการอัปเดตผลิตภัณฑ์ ตั้งชื่อมันว่า productUpdated และเพิ่มลงในฟิลด์ reducers หลังจาก reducer productAdded และส่งพารามิเตอร์ state และ action ให้มันทันที ซึ่งเราจำได้ว่า reducer ทำงานบนพื้นฐานนี้:

reducers: {
	productAdded(state, action) {
		state.push(action.payload)
	},
	productUpdated(state, action) {},
},

ทีนี้มาคิดดูว่าเราต้องการข้อมูลอะไรบ้างสำหรับการอัปเดตผลิตภัณฑ์ ก่อนอื่นเลยคือ id เราจะใช้มันเพื่อหาผลิตภัณฑ์ที่เราสนใจใน store ได้ ข้อมูลที่เหลือ - ชื่อ, คำอธิบาย, ราคา และจำนวน จะเป็นค่าสำหรับการเปลี่ยนแปลง เราจะได้ค่าทั้งหมดเหล่านี้จากคุณสมบัติ payload ของ object action ที่จะส่งมาให้เรา และถ้าเราเขียนมันด้วยมือ มันจะมีลักษณะดังแสดงด้านล่าง สังเกตว่าค่าที่คาดหวังของคุณสมบัติ payload เป็นอาร์กิวเมนต์เดียว ดังนั้นเราจะส่ง object มาที่นี่ (เราจะพูดถึงเรื่องนี้ในภายหลัง):

{
	type: 'products/productUpdated',
	payload: {id, name, desc, price, amount}
}

เมื่อเข้าใจประเด็นหลักแล้ว ตอนนี้เราสามารถเขียนโค้ดสำหรับ productUpdated ภายในวงเล็บปีกกาได้ ก่อนอื่นดึงข้อมูลที่เปลี่ยนแปลงจาก object action:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
},

ตอนนี้เราจะหา ผลิตภัณฑ์ที่ต้องการเปลี่ยนแปลงโดยใช้ id ที่ได้มา:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
},

ถ้าหาผลิตภัณฑ์ดังกล่าวเจอใน store เราจะแทนที่ข้อมูลของมันด้วยค่าต่างๆ ใหม่:

productUpdated(state, action) {
	const { id, name, desc, price, amount } = action.payload
	const desiredProduct = state.find(product => product.id === id)
	if (desiredProduct) {
		desiredProduct.name = name
		desiredProduct.desc = desc
		desiredProduct.price = price
		desiredProduct.amount = amount
	}
},

สิ่งที่เหลืออยู่สำหรับเราคือการส่งออก action creator สำหรับใช้ในคอมโพเนนต์ ซึ่ง createSlice จะสร้างให้เราอย่างง่ายดาย มาเพิ่มมันลงในการส่งออกที่ท้ายไฟล์ พร้อมกับ productAdded ที่มีอยู่:

export const { productAdded, productUpdated } = productsSlice.actions

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

ในกรณีนี้ object action ของคุณจะมีลักษณะอย่างไร? ส่งโค้ดของมันมาในคำตอบ

ที่ท้ายไฟล์ ให้ส่งออก action creator studentUpdated ที่ได้