รายชื่อผู้ขายใน Redux

ในบทเรียนที่ผ่านมา เราได้จบเนื้อหาหลักแล้ว ตอนนี้ด้วย thunk เราได้รับ รายการสินค้าจากเซิร์ฟเวอร์และสามารถบันทึก สินค้าใหม่บนเซิร์ฟเวอร์ได้ มาดูเรื่อง ผู้ขายกันบ้าง เพราะเราได้รับข้อมูลสำหรับพวกเขาด้วย มาสร้างหน้าแยกสำหรับแสดงรายชื่อ ผู้ขายกัน

เปิดแอปพลิเคชันสินค้าของเรา และในนั้น มีโฟลเดอร์ sellers สร้างไฟล์ SellersList.jsx ในโฟลเดอร์นี้ ที่นี่เราจะใช้ useSelector, Link และ selectAllSellers ซึ่งเราจะเขียนโค้ด ใน sellersSlice.js ภายหลัง:

sellers/SellersList.jsximport { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

จากนั้นสร้าง SellersList ขึ้นมา ในนั้นเรา จะรับข้อมูลผู้ขายทั้งหมดด้วย hook useSelector แล้วจึงได้รับโครงสร้าง HTML สำหรับรายการ ผู้ขายในลูป map โดยที่ชื่อ ผู้ขายแต่ละชื่อจะเป็นลิงก์ไปยังหน้าของเขา และในท้ายที่สุดคืนโครงสร้าง HTML ที่มีหัวข้อและ รายการที่ได้รับ:

sellers/SellersList.jsxexport const SellersList = () => {
  const sellers = useSelector(selectAllSellers)
  const sellersToRender = sellers.map((seller) => (
    <li key={seller.id}>
      <Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
    </li>
  ))

  return (
    <div>
      <h2>Sellers:</h2>

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

จากนั้นเข้าไปที่ไฟล์ sellersSlice.js และทำคล้าย กับ selectors ใน productsSlice.js สร้าง selector สองตัวที่ส่วนท้ายไฟล์ หลังการส่งออก reducer:

sellers/sellersSlice.jsexport const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

ตอนนี้เราจำเป็นต้องกำหนดเส้นทางสำหรับ หน้ารายชื่อ โดยเปิดไฟล์ App.jsx และในอาร์เรย์ของเส้นทางย่อย children เพิ่มอ็อบเจ็กต์อีกหนึ่งตัว (อย่าลืมนำเข้า component SellersList):

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

เพื่อให้ลิงก์ 'Sellers' ในเมนูทำงาน เข้าไปที่ไฟล์ root.jsx (นาน มาแล้ว ... ) และเปลี่ยนแท็ก a เป็น element NavLink:

app/root.jsx<NavLink to="/sellers" end>
  Sellers
</NavLink>

และสุดท้าย เพื่อให้ในเมนูของเรา มีการเน้นลิงก์ที่ใช้งานอยู่ และ เข้าใจได้ว่าเราอยู่บนหน้าไหน เราเพิ่มสไตล์ใน index.css:

index.cssnav a.active {
  color: purple;
}

มาเรียกใช้แอปพลิเคชันของเรา ตอนนี้เราสามารถ เข้าไปที่หน้าผู้ขายได้ โดยคลิกที่ 'Sellers' ในเมนู แน่นอนว่า ต้องคลิกที่ 'Products' ในเมนูก่อน มิฉะนั้น สินค้าของเราจะไม่ถูกโหลด ในบทเรียน ถัดไป เราจะสร้างหน้าให้กับแต่ละผู้ขาย และจบการศึกษาเนื้อหาบทเรียนนี้ใน Redux