หน้าขายใน Redux

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

มาเปิดแอปพลิเคชันผลิตภัณฑ์ของเรา และในนั้น เปิดโฟลเดอร์ sellers มาสร้างไฟล์ SellerPage.jsx ในโฟลเดอร์นี้ ตอนนี้เริ่ม เขียนโค้ด SellerPage สำหรับคอมโพเนนต์ ของเรากัน:

sellers/SellersPage.jsxexport const SellerPage = () => {}

เริ่มต้นด้วยการรับ id ผู้ขาย และใช้มัน ค้นหาวัตถุผู้ขายที่ต้องการใน slice:

sellers/SellersPage.jsxexport const SellerPage = () => {
  let params = useParams()
  const { sellerId } = params

  const seller = useSelector((state) => selectSellerById(state, sellerId))
}

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

sellers/SellersPage.jsxconst productsOfSeller = useSelector((state) => {
  const allProducts = selectAllProducts(state)
  return allProducts.filter((product) => product.seller === sellerId)
})

จากนั้นจากชื่อผลิตภัณฑ์ที่เลือก เราจะสร้างรายการโดยใช้ map โดยที่ แต่ละชื่อผลิตภัณฑ์ในรายการนี้ จะเป็นลิงก์ไปยังหน้าของผลิตภัณฑ์นั้น:

sellers/SellersPage.jsxconst productNames = productsOfSeller.map((product) => (
  <li key={product.id}>
    <Link to={`/products/${product.id}`}>{product.name}</Link>
  </li>
))

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

sellers/SellersPage.jsxreturn (
  <div>
  <h2>Seller: {seller.name}</h2>

  <ul>{productNames}</ul>
  </div>
)

แน่นอนว่าเรายังต้องการเส้นทาง สำหรับหน้าผู้ขาย เปิด ไฟล์ App.jsx และเพิ่มมัน เป็นลำดับสุดท้ายในเส้นทางย่อย:

App.jsx{
  path: '/sellers/:sellerId',
  element: <SellerPage />,
},

อย่าลืมนำเข้า hook และคอมโพเนนต์ที่จำเป็น ใน SellersPage.jsx และ App.jsx

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

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