Danh sách người bán trong Redux

Trong các buổi học trước, chúng ta đã hoàn thành phần nội dung chính. Bây giờ với sự trợ giúp của thunk, chúng ta nhận được danh sách sản phẩm từ máy chủ và có thể lưu một sản phẩm mới lên máy chủ. Hãy cùng tìm hiểu về người bán. Rốt cuộc chúng ta cũng nhận được dữ liệu cho họ. Hãy tạo một trang riêng với danh sách người bán.

Mở ứng dụng sản phẩm của chúng ta, và trong đó là thư mục sellers. Hãy tạo trong thư mục này tệp SellersList.jsx. Ở đây chúng ta sẽ sử dụng useSelector, Link và selectAllSellers, mã mà chúng ta sẽ viết trong sellersSlice.js một chút sau:

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

Tiếp theo, hãy tạo chính SellersList. Trong đó chúng ta sẽ lấy tất cả người bán bằng hook useSelector, sau đó nhận được markup cho danh sách người bán trong vòng lặp map, hơn nữa mỗi tên người bán của chúng ta sẽ dẫn đến trang của họ. Và cuối cùng trả về markup với tiêu đề và danh sách đã nhận được:

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>
	)
}

Sau đó, hãy vào tệp sellersSlice.js và tương tự với các selector trong productsSlice.js, hãy tạo ở cuối tệp hai selector sau khi xuất reducer:

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

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

Bây giờ chúng ta cần định tuyến cho trang với danh sách, để làm điều này hãy mở tệp App.jsx và vào mảng các tuyến con children thêm một đối tượng nữa (đừng quên import component SellersList):

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

Để liên kết 'Sellers' trong menu hoạt động, hãy vào tệp root.jsx (lâu rồi không gặp ... ) và thay thế thẻ a bằng phần tử NavLink:

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

Và cuối cùng. Để trong menu của chúng ta liên kết đang hoạt động được đánh dấu, và rõ ràng chúng ta đang ở trên trang nào, chúng ta sẽ thêm kiểu vào index.css:

nav a.active {
	color: purple;
}

Hãy chạy ứng dụng của chúng ta. Bây giờ chúng ta có thể đi đến trang với người bán bằng cách nhấp vào 'Sellers' trong menu. Tất nhiên, trước tiên, cần nhấp vào 'Products' trong menu, nếu không sản phẩm của chúng ta sẽ không được tải. Trong bài học tiếp theo chúng ta sẽ tạo một trang cho mỗi người bán và kết thúc việc học giáo trình này về Redux.

Mở ứng dụng với sinh viên của bạn. Sau khi nghiên cứu tài liệu bài học, trong thư mục teachers hãy tạo tệp TeachersList.jsx. Với sự trợ giúp của component này, bạn sẽ hiển thị danh sách giảng viên. Import vào đó các component và hook cần thiết.

Viết mã cho component TeachersList, lấy tất cả giảng viên trong đó và tạo danh sách giảng viên teachersToRender, hãy để trong mỗi dòng của danh sách này hiển thị họ và tên đệm của họ, và trong ngoặc là môn học mà họ dạy. Hãy để mỗi họ tên cùng nhau là một liên kết dẫn đến một trang riêng cho mỗi giảng viên. Sau đó ở cuối mã component, hãy trả về markup với tiêu đề và danh sách đã tạo.

Ở cuối tệp teachersSlice.js hãy tạo một cặp hàm selector selectAllTeachers và selectTeacherById, như đã trình bày trong bài học.

Trong App.jsx hãy kết nối thêm một tuyến con cho trang với giảng viên.

Trong tệp root.jsx trong menu cho 'Teachers' hãy thay thế thẻ a bằng NavLink, như đã trình bày trong bài học. Hãy làm sao cho liên kết đang hoạt động trong menu được đánh dấu bằng cách nào đó, bằng cách thêm kiểu cho nó vào index.css.