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

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

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

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

export const selectAllProducts = (state) => state.products.products

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

export 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 ไปยังไฟล์นี้ เพราะตรงนี้เราต้องการดึงข้อมูลผลิตภัณฑ์ทั้งหมด:

import { selectAllProducts } from './productsSlice'

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

const products = useSelector((state) => state.products)

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

const products = useSelector(selectAllProducts)

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

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

เป็น:

const product = useSelector((state) => selectProductById(state, productId))

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

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

เปิดแอปพลิเคชันเกี่ยวกับนักเรียนของคุณ เปิดไฟล์ studentsSlice.js ในนั้น ที่ด้านล่างสุดของไฟล์ ให้เขียนและส่งออก ตามที่แสดงในบทเรียน selector สองตัวสำหรับดึงข้อมูลนักเรียนทั้งหมด selectAllStudents และสำหรับดึงข้อมูลนักเรียนหนึ่งคนตาม id selectStudentById

ตอนนี้นำเข้า selectAllStudents และ selectStudentById ไปยังไฟล์ StudentsList.jsx, StudentPage.jsx และ EditStudentForm.jsx ทำการเปลี่ยนแปลงที่เกี่ยวข้องในไฟล์เหล่านี้ ตามที่แสดงในบทเรียน