ตัวเลือกและ Hook useSelector ใน Redux
ในบทเรียนที่ผ่านมา เราได้บันทึกข้อมูลสินค้า ลงใน store แล้ว แล้วเราจะดึงข้อมูลเหล่านั้น จาก store ได้อย่างไร?
เพื่อที่จะทำสิ่งนี้ได้ เราจำเป็นต้อง เขียนฟังก์ชันตัวเลือก ฟังก์ชันนี้ รู้วิธีดึงข้อมูลส่วนหนึ่ง จากค่า state ที่เก็บอยู่ใน store และช่วยหลีกเลี่ยงการเขียนโค้ดซ้ำซ้อน เมื่อแอปพลิเคชันขยายตัว ฟังก์ชันนี้ รับ state เป็นอินพุต และให้เอาต์พุต เป็นสไลซ์ของ state ที่ต้องการ ตัวอย่างเช่น แบบนี้:
const selectValue = state => state.some.value
ในตอนเริ่มต้นของหนังสือเรียนได้มีการกล่าวถึงว่า
store มีเมธอดgetState และเรา
สามารถใช้มันเพื่อ
รับค่าของ state ได้อย่างง่ายดาย:
const value = selectValue(store.getState())
ปัญหาอยู่ที่ว่า React
คอมโพเนนต์ของเราไม่สามารถเข้าถึง
store โดยตรงได้ เนื่องจากไม่อนุญาตให้ import
store เข้าไปในไฟล์คอมโพเนนต์ แต่เราสามารถ
รับข้อมูลในคอมโพเนนต์ได้โดยใช้
React-Redux hookuseSelector นอกจากนี้
ด้วย hook นี้ คอมโพเนนต์ของเราจะได้รับ
เฉพาะข้อมูลที่ทันสมัยเสมอ:
const count = useSelector(selectValue)
