Seller page in Redux

There's just one last thing left to do. Let's do the last thing in this lesson - add a separate page for each seller to our application. Here, there will only be actions that are already familiar to you. Let's get started.

Let's open our product app, and in it the sellers folder. Let's create a SellerPage.jsx file in this folder. Now let's start writing the SellerPage code for our component:

export const SellerPage = () => {}

First, we get the seller's id and use it to find the required seller's object in the slice:

export const SellerPage = () => {
	let params = useParams()
	const { sellerId } = params

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

Further below in the code for SellerPage after getting the seller we will get all the products and then select only those that are posted by this seller:

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

And then we will form a list from the names of the selected products using map. Moreover, each product name in this list will be a link to the page of this product:

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

And at the end of the code for SellerPage we return the layout: a header with the seller's name and a list of products that this seller has posted:

return (
	<div>
	<h2>Seller: {seller.name}</h2>

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

Of course, we still need a route for the seller page. Let's open the App.jsx file and add it last to the child routes:

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

Don't forget to import the required hooks and components in SellersPage.jsx and App.jsx.

Let's launch our application, load the products, and then click on the link 'Sellers' in the menu on the left. Now we can go to the page of any seller by clicking on their name, and then on their page we can see all their products. And by clicking on any of their products, we will go to the page with this product.

That's all for now. We've learned the basics of Redux for building an app and even a little more. We've gotten to know various useful tools. Good luck building your Redux apps!

Open your app with students. After studying the lesson materials, in the teachers folder, create a TeacherPage.jsx file. In the TeacherPage component code, get an object with the desired teacher and all the students of this teacher. Using map, create a list of them, let the full name of each student be a link to this student's page.

Let the returned layout have a heading with the teacher's full name, below that there will be a smaller heading with the subject he teaches, and below that there will be a list of his students.

In App.jsx, include another child route for the teacher page.

Run your application and make sure everything works.