การเตรียมข้อมูลสำหรับอ็อบเจกต์ action ใน Redux

ไม่นานมานี้เราได้พูดคุยกับคุณเกี่ยวกับเรื่องที่ว่า ฟังก์ชัน createSlice คาดหวังหนึ่ง อาร์กิวเมนต์เมื่อสร้าง action.payload ด้านหนึ่งสิ่งนี้ทำให้การใช้งานง่ายขึ้น แต่อีกด้านอาจต้องการการเคลื่อนไหวเพิ่มเติม สำหรับการเตรียมเนื้อหาของ อ็อบเจกต์ action

มาเปิดแอปพลิเคชันของเราเกี่ยวกับ สินค้า และในไฟล์ NewProductForm.jsx โปรดสังเกตบรรทัดโค้ดต่อไปนี้:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

ที่นี่เรารวบรวมอ็อบเจกต์ payload โดยตรงในคอมโพเนนต์ React และส่งผ่านเข้าไปใน แอ็กชัน productAdded แต่ถ้าเราต้อง ส่งแอ็กชันเดียวกันจาก หลายคอมโพเนนต์หรือลอจิกสำหรับ การรวบรวมกลายเป็นซับซ้อนล่ะ? โดยหลักการแล้ว คอมโพเนนต์ของเราไม่ควรสนใจว่า อ็อบเจกต์ใน payload สำหรับแอ็กชันนี้ หน้าตาเป็นอย่างไร นอกจากนี้เรายังไม่พอใจกับ การทำซ้ำโค้ดอย่างต่อเนื่อง

ปัญหาเหล่านี้เราสามารถแก้ไขได้อีกครั้งด้วยความช่วยเหลือจาก createSlice อันโด่งดังของเรา เนื่องจากเมื่อเขียนรีดิวเซอร์ มันอนุญาตให้เราใช้ฟังก์ชันคอลแบ็ก prepare ซึ่งเราสามารถเขียนลอจิกต่างๆ, สร้างตัวเลขสุ่ม และอื่นๆ ภายในนั้นได้ ใน กรณีเช่นนี้ค่าสำหรับฟิลด์ของรีดิวเซอร์อาจ ถูกแสดงในรูปของอ็อบเจกต์ต่อไปนี้:

{reducer, prepare}

มาเปิดไฟล์ของเรา productsSlice.js และเปลี่ยนโค้ดสำหรับรีดิวเซอร์ productAdded ตอนนี้โค้ดส่วนนี้:

productAdded(state, action) {
	state.push(action.payload)
},

เราจะเปลี่ยนเป็นดังต่อไปนี้ ซึ่ง ฟังก์ชัน reducer จะดูแล การอัปเดตสเตทใน store และ prepare จะ คืนค่าอ็อบเจกต์ payload ที่ มี id ที่สร้างขึ้นและ ข้อมูลอื่นๆ ของเรา:

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

เนื่องจากตอนนี้เราจะสร้าง id ที่นี่ ไม่ใช่ในคอมโพเนนต์ เรา มาเพิ่ม nanoid ในการนำเข้า:

import { createSlice, nanoid } from '@reduxjs/toolkit'

สุดท้าย เรามาทำการเปลี่ยนแปลงใน NewProductForm.jsx แทนที่ บรรทัด:

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

เราจะมีแบบนี้ ซึ่งเราเพียงแค่ ส่งผ่านข้อมูลที่จำเป็น โดยคั่นด้วยเครื่องหมายจุลภาค (อย่าลืมในไฟล์นี้ให้ลบ nanoid ออกจากการนำเข้า):

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

มาเริ่มต้นแอปพลิเคชัน จากนั้นสร้างสินค้าใหม่ และตรวจสอบให้แน่ใจว่าเราไม่ได้ทำอะไรพัง

เปิดแอปพลิเคชันของนักเรียนของคุณ ในไฟล์ StudentsSlice.js เขียนใหม่ รีดิวเซอร์ studentAdded ของคุณในลักษณะที่ ให้มันอยู่ในรูปอ็อบเจกต์ {reducer, prepare} ดังที่แสดงในบทเรียน

ทำการเปลี่ยนแปลงที่เกี่ยวข้องใน ไฟล์ NewStudentForm.jsx ดังที่แสดง ในบทเรียน เริ่มต้นแอปพลิเคชันและตรวจสอบให้แน่ใจ ว่าทุกอย่างทำงานเหมือนเดิม