คำศัพท์พื้นฐานใน Redux

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

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

ฟิลด์สำคัญที่สองของอ็อบเจกต์แอ็กชัน คือฟิลด์ payload มันจะบรรจุ ข้อมูล payload ของแอ็กชัน ข้อมูล payload หมายถึง ข้อมูลบางส่วนที่ถูกส่งผ่าน เป็นพารามิเตอร์ในแอ็กชัน

นอกจากนี้อ็อบเจกต์นี้ยังสามารถ มีฟิลด์อื่นๆ ที่มีข้อมูลเพิ่มเติมได้

ลองสร้างแอ็กชันตัวอย่าง แล้วตั้งชื่อว่า addOrderAction ให้ มันรับผิดชอบในการเพิ่มออร์เดอร์ หมายความว่าในคุณสมบัติ type เราจะระบุว่า ออร์เดอร์ถูกเพิ่มแล้ว (orderAdded) ลงในรายการออร์เดอร์ (orders) และใน payload เราจะระบุรายละเอียดเพิ่มเติม ว่าออร์เดอร์คืออะไร เช่น - ทาผนัง

const addOrderAction = {
	type: 'orders/orderAdded',
	payload: 'Paint a wall'
}

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

const addOrder = text => {
	return {
		type: 'orders/orderAdded',
		payload: text
	}
}

แนวคิดสำคัญถัดไปในลำดับคือ reducer (รีดิวเซอร์) - คือฟังก์ชันที่ รับสถานะปัจจุบันและอ็อบเจกต์ แอ็กชัน ฟังก์ชันนี้ตัดสินใจว่าจะอัปเดต สถานะอย่างไร และส่งคืนสเตทที่อัปเดตแล้ว หากจำเป็น

แนวคิดถัดไป - สโตร์ (store) - คืออ็อบเจกต์ที่เก็บ สถานะส่วนกลางปัจจุบันของแอปพลิเคชัน Redux อ็อบเจกต์นี้ มีเมธอด getState ซึ่งใช้ เพื่อรับค่าปัจจุบันของสเตทได้

สโตรียังมีเมธอด dispatch ด้วย เรียกเมธอดนี้และส่งอ็อบเจกต์ แอ็กชัน - นี่เป็นวิธีเดียว ที่จะเปลี่ยนสเตทได้ ผลคือ สโตร์จะเรียกฟังก์ชันรีดิวเซอร์และเก็บค่า สเตทใหม่ไว้ที่ตัวมันเอง

และแนวคิดสุดท้ายที่เราจะพิจารณา ในบทเรียนนี้คือ ซีเลกเตอร์ ซีเลกเตอร์คือฟังก์ชันพิเศษ ที่รู้วิธีดึงข้อมูล จากสเตทที่อยู่ในสโตร์ ฟังก์ชันเหล่านี้ มีประโยชน์อย่างยิ่งเมื่อ แอปพลิเคชันขยายใหญ่ขึ้นและช่วย หลีกเลี่ยงการเขียนโค้ดซ้ำซ้อน

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