การนำข้อมูลจาก Slice มาใช้ซ้ำใน Redux

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

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

import { useSelector } from 'react-redux'

จากนั้นดึงผลิตภัณฑ์ที่ต้องการจาก store ตาม id ผู้ขาย ซึ่งเราจะส่งผ่าน คอมโพเนนต์ใหม่ของเราใน props:

export const SellerOfProd = ({ sellerId }) => {
	const seller = useSelector((state) =>
		state.sellers.find((seller) => seller.id === sellerId)
	)
}

และในกรณีที่มีผู้ขายดังกล่าว เราจะส่งคืนชื่อของเขา แต่ถ้าไม่มี เราจะส่งคืน 'unknown':

return <span>by {seller ? seller.name : 'unknown'}</span>

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

<SellerOfProd sellerId={product.seller} />

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

หมายเหตุเล็กน้อย: หาก eslint ของคุณใน editor VS Code แจ้งเตือนเกี่ยวกับ sellerId แต่แอปพลิเคชันทำงาน คุณสามารถ เพิกเฉยต่อสิ่งนี้ไปก่อน หรือเปิดไฟล์ .eslintrc.cjs ของแอปพลิเคชันของคุณและใน rules เพิ่ม "react/prop-types": "off"

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

<SellerOfProd sellerId={product.seller} />

เปิดแอปพลิเคชันนักเรียนของคุณ หลังจากศึกษาบทเรียนแล้ว ในโฟลเดอร์ students สร้างไฟล์สำหรับคอมโพเนนต์ TeacherForStudent ผลลัพธ์คอมโพเนนต์ควรส่งคืน ชื่อ-นามสกุลของอาจารย์ และถัดจากนั้นในวงเล็บ วิชาที่เขาสอน อาจารย์ ที่ต้องการให้ค้นหาโดยใช้ hook useSelector หากไม่มีอาจารย์สำหรับ นักเรียนคนนี้ แสดงผล 'anonym'

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

ทำแบบเดียวกันกับภารกิจก่อนหน้า แต่สำหรับหน้าเว็บนักเรียนแยกต่างหาก