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

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

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

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

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

export 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:

export const selectAllSellers = (state) => state.sellers

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

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

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

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

<NavLink to="/sellers" end>
	Sellers
</NavLink>

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

nav a.active {
	color: purple;
}

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

เปิดแอปพลิเคชันนักเรียนของคุณ หลังจากศึกษาบทเรียนแล้ว ในโฟลเดอร์ teachers สร้างไฟล์ TeachersList.jsx โดยใช้ คอมโพเนนต์นี้ คุณจะแสดงรายชื่อ ครูผู้สอน นำเข้า คอมโพเนนต์และ hooks ที่จำเป็น

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

ในตอนท้ายของไฟล์ teachersSlice.js สร้าง ฟังก์ชัน selector คู่หนึ่ง selectAllTeachers และ selectTeacherById ตามที่แสดงในบทเรียน

ใน App.jsx เชื่อมต่อเส้นทางย่อยอีกหนึ่งเส้นทาง สำหรับหน้าครูผู้สอน

ในไฟล์ root.jsx ในเมนูสำหรับ 'Teachers' เปลี่ยนแท็ก a เป็น NavLink ตามที่แสดง ในบทเรียน ทำให้ลิงก์ที่ใช้งานอยู่ใน เมนูโดดเด่นขึ้น โดยเพิ่ม สไตล์สำหรับสิ่งนี้ใน index.css