รีดิวเซอร์และแอคชันใน Redux

ในบทเรียนที่แล้วเราได้ทำแบบฟอร์มสำหรับ เพิ่มผลิตภัณฑ์เสร็จและแสดงผลบน หน้าแรกแล้ว แต่ขณะนี้ข้อมูลที่เพิ่มเข้ามา ยังไม่ได้รับการบันทึก หรือกล่าวอีกนัยหนึ่ง ผลิตภัณฑ์ใหม่ยังไม่ถูกเพิ่มเข้าไปใน store ที่มีอยู่ ลองมาแก้ไขกัน

เริ่มต้นในแอปพลิเคชันผลิตภัณฑ์ของเรา ให้เปิดไฟล์ productsSlice.jsx และเขียนใน คุณสมบัติ reducer สำหรับ createSlice เป็นฟังก์ชัน productAdded ซึ่งจะทำหน้าที่ เพิ่มผลิตภัณฑ์เข้าไปใน store โดยอิงจาก state ปัจจุบันและแอคชันที่ส่งเข้ามา ควรสังเกตว่าในที่นี้เราได้รับมาไม่ใช่ state ทั้งหมด แต่เป็นเพียงส่วนของ state ที่ รับผิดชอบเกี่ยวกับผลิตภัณฑ์ (สไลซ์ products รู้ เพียงส่วนนี้) วัตถุที่เก็บผลิตภัณฑ์ใหม่ จะอยู่ในคุณสมบัติ payload ของวัตถุ action ซึ่งจะถูกสร้างขึ้นโดย ตัวจัดการเหตุการณ์เมื่อกดปุ่มบันทึก ในแบบฟอร์ม ส่งผลให้รีดิวเซอร์ productAdded จะมีลักษณะในโค้ด createSlice ดังนี้:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})

แล้วแอคชันล่ะ? ในตอนเริ่มต้นของหนังสือเรียน เราได้กล่าวถึงว่า แอคชัน คือ เหตุการณ์บางอย่าง ที่ถูกแสดงในรูปแบบของวัตถุ อธิบายถึง สิ่งที่เกิดขึ้นในแอปพลิเคชัน เรายังได้พูดถึง ว่าสามารถใช้ฟังก์ชัน action creator ซึ่งจะสร้างวัตถุดังกล่าวให้เราได้ ตัวอย่างเช่นแบบนี้:

const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}

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

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

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

เพิ่มการส่งออกฟังก์ชัน action creator ที่ได้ ที่ท้ายไฟล์ studentsSlice.jsx