การเพิ่มรีดิวเซอร์ลงในแอปพลิเคชัน Redux

ในบทเรียนที่แล้ว เราได้สร้างคอมโพเนนต์ UserReaction เพื่อให้แต่ละ ผลิตภัณฑ์มีปฏิกิริยาจากผู้ใช้ด้วย ตอนนี้เราจำเป็นต้องเขียนรีดิวเซอร์ ซึ่งจะจัดการกับตัวนับ ปฏิกิริยาเมื่อผู้ใช้คลิก ปุ่มปฏิกิริยาต่างๆ

มาเปิดแอปพลิเคชันผลิตภัณฑ์ของเรา และในนั้นเปิดไฟล์ productsSlice.js ที่มี รีดิวเซอร์ทั้งหมด ตอนนี้ในคุณสมบัติ reducers มาสร้างรีดิวเซอร์เพิ่มอีกหนึ่งตัวคือ reactionClicked (เราสามารถวางมันไว้แรกสุด - ก่อน productAdded, แม้ว่ามันจะไม่สำคัญ) ตามปกติ ส่ง พารามิเตอร์ state และ action ให้มัน:

reactionClicked(state, action) {},

และตอนนี้ภายในวงเล็บปีกกา ซึ่งเรา ปล่อยว่างไว้ในขั้นตอนก่อนหน้า มาเขียน โค้ดสำหรับมันกัน ประการแรก เราจะแยก id ผลิตภัณฑ์ จาก payload ของอ็อบเจ็กต์ action และ ชื่อปฏิกิริยา:

const { productId, reaction } = action.payload

จากนั้นจากสเตทที่ส่งมา ให้ได้ผลิตภัณฑ์ ที่ต้องการ:

const currentProduct = state.find(product => product.id === productId)

และหากมีผลิตภัณฑ์ดังกล่าว ให้เพิ่ม ค่าของปฏิกิริยาที่ส่งมา ขึ้น 1:

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

เพียงเท่านี้ โค้ดของเรา สำหรับ reactionClicked ก็พร้อม:

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

มาเพิ่มการส่งออก action creator ที่ได้ท้ายไฟล์:

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

มีสองประเด็นสำคัญที่ต้องทราบไว้ ดังที่คุณจำได้จากบทเรียนก่อนหน้า - การอัปเดต ค่าโดยตรงในโค้ดรีดิวเซอร์แบบนี้ ไม่ได้รับอนุญาต (ดูที่บรรทัดนี้: reactions[reaction]++) แต่เราสามารถทำได้เพราะเราทำมัน ภายใน createSlice ซึ่งใช้ ไลบรารี Immer มันจะจัดการให้ แปลงโค้ดของเราเป็นการอัปเดต ค่าแบบ "ปลอดภัย" สิ่งนี้ทำให้เราเขียนสิ่ง ซับซ้อนได้ด้วยวิธีที่ง่ายขึ้น

สิ่งต่อไปที่ต้องจำ - อ็อบเจ็กต์ action ควรมีข้อมูล น้อยที่สุดเท่าที่เป็นไปได้ - เพียงเพื่อ ระบุว่าเกิดอะไรขึ้น อย่าทำ การคำนวณใดๆ ไว้ในนั้น การคำนวณทั้งหมดสำหรับ การอัปเดตสเตทควรทำในรีดิวเซอร์ คุณสามารถเขียนตรรกะสำหรับสิ่งนี้ ได้เท่าที่ต้องการที่นี่

เปิดแอปพลิเคชันนักเรียนของคุณ และในไฟล์ studentsSlice.js ให้เพิ่ม รีดิวเซอร์อีกหนึ่งตัวคือ voteClicked ใน ฟิลด์ reducers ตามที่แสดงในบทเรียน เขียนโค้ดสำหรับมัน งานของ รีดิวเซอร์ของคุณ - เมื่อคลิกให้เพิ่มค่า vote (หรือเสียงโหวต) ที่ถูกคลิก สำหรับนักเรียนนั้น ขึ้น 1

ท้ายไฟล์ อย่าลืมส่งออก action creator voteClicked ที่ได้