การดึงข้อมูล Selectors ใน Redux

บางครั้งก็มีประโยชน์มากที่จะกำจัดโค้ดที่เกินความจำเป็นออกจากแอปพลิเคชัน และรวมทั้งการห่อหุ้มข้อมูลให้เป็นระบบ

มาเปิดแอปพลิเคชันเกี่ยวกับผลิตภัณฑ์ของเรากัน สังเกตดูว่าในหลายๆ ที่ในแอปพลิเคชัน เราใช้ selectors เพื่อดึงข้อมูล slice ของผลิตภัณฑ์ออกมา เพื่อดำเนินการบางอย่างกับมัน

ตอนนี้เราจะเปิดไฟล์ productsSlice.js ของเรา เลื่อนลงไปท้ายไฟล์ และเพิ่มโค้ดอีกสองสามบรรทัด ซึ่งเราจะเขียน selector ขึ้นมาสองตัวและส่งออกไป ฟังก์ชันแรกของเราจะใช้สำหรับการดึงข้อมูลผลิตภัณฑ์ทั้งหมด:

products/productsSlice.jsexport const selectAllProducts = (state) => state.products.products

และหลังจากนั้นก็คือตัวที่สอง - สำหรับดึงข้อมูลผลิตภัณฑ์หนึ่งรายการตาม id:

products/productsSlice.jsexport const selectProductById = (state, productId) =>
  state.products.products.find((product) => product.id === productId)

แน่นอนคุณอาจมีคำถามที่ชอบธรรมเกิดขึ้น - ทำไมเราถึงมีโครงสร้างซ้อนกันแบบนี้: state.products.products? คำตอบก็ง่ายดาย เพราะในบทเรียนที่แล้วเราได้เปลี่ยนโครงสร้างของ slice และตอนนี้ผลิตภัณฑ์ของเราจะอยู่ในรูปแบบของอาร์เรย์ภายในคุณสมบัติ products แยกต่างหากของ slice ผลิตภัณฑ์ state.products (จำไว้ว่า state ตรงนี้คือวัตถุสถานะหลักของ Redux ซึ่งประกอบด้วย slice ทั้งหมด)

ดังนั้นเราเพียงแค่ย้ายโค้ดสำหรับฟังก์ชัน selector ไปไว้ในที่เดียวในแอปพลิเคชัน และตอนนี้เราจำเป็นต้องทำการเปลี่ยนแปลงที่เกี่ยวข้องในจุดที่เราเคยใช้มัน เริ่มจากไฟล์ ProductsList.jsx ก่อน นำเข้า selectAllProducts ไปยังไฟล์นี้ เพราะตรงนี้เราต้องการดึงข้อมูลผลิตภัณฑ์ทั้งหมด:

products/ProductsList.jsximport { selectAllProducts } from './productsSlice'

และในตอนต้นของโค้ดฟังก์ชัน ProductsList ให้แทนที่:

products/ProductsList.jsxconst products = useSelector((state) => state.products)

ด้วยบรรทัดนี้:

products/ProductsList.jsxconst products = useSelector(selectAllProducts)

ตอนนี้ไปที่ไฟล์ ProductPage.jsx ตรงนี้เราต้องการผลิตภัณฑ์ตาม id ทำการเปลี่ยนบรรทัด (อย่าลืมเกี่ยวกับการนำเข้า):

products/ProductPage.jsxconst product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

เป็น:

products/ProductPage.jsxconst product = useSelector((state) => selectProductById(state, productId))

ให้คุณทำการเปลี่ยนแบบเดียวกันด้วยตัวเองในไฟล์ EditProductForm.jsx ตรงนี้เราก็ต้องการผลิตภัณฑ์ตาม id เช่นกัน

จำไว้ว่าการปรับปรุงให้มีประสิทธิภาพแบบนี้มีไว้เพื่อความสะดวกของคุณเท่านั้น และคุณสามารถทำได้เมื่อคุณคิดว่าจำเป็นและเหมาะสม ในตัวอย่างของเรา ลองนึกภาพว่าเราเขียนโค้ดฟังก์ชัน selector ใหม่ทุกครั้งในที่ต่างๆ กัน แล้วต่อมาเราเปลี่ยนโครงสร้างของ state เราก็จะต้องไปแก้ไขมันในทุกคอมโพเนนต์