List of sellers in Redux

In the previous lessons we finished with the main material. Now with the help of thunk we get a list of products from the server and can save a new product on the server. Let's deal with sellers. After all, we get data for them too. Let's make a separate page with a list of sellers.

Let's open our product app, and in it the sellers folder. Let's create a SellersList.jsx file in this folder. Here we will use useSelector, Link and selectAllSellers, the code for which we will write in sellersSlice.js a little later:

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

Next, we will create SellersList itself. In it, we will get all the sellers using the useSelector hook, then we will get the layout for the list of sellers in the map cycle, and each seller name will lead to his page. And at the end, we will return the layout with the title and the resulting list:

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

Then we go to the file sellersSlice.js and, similar to the selectors in productsSlice.js, we create two selectors at the very end of the file after exporting the reducer:

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

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

Now we need to register a route for the page with the list, to do this, open the file App.jsx and add another object to the array of child routes children (don't forget to import the component SellersList):

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

To make our 'Sellers' link in the menu work, let's go into the root.jsx file (how long ago was that...) and replace the a tag with the NavLink element:

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

And the last thing. To highlight the active link in our menu and make it clear which page we are on, we will add a style to index.css:

nav a.active {
	color: purple;
}

Let's run our app. Now we can go to the page with sellers by clicking on 'Sellers' in the menu. First, of course, we need to click on 'Products' in the menu, otherwise our products will not load. In the next lesson, we will make a page for each seller and with that we will finish studying this Redux tutorial.

Open your app with students. After reviewing the lesson materials, create a file TeachersList.jsx in the teachers folder. You will use this component to display the list of teachers. Import the necessary components and hooks into it.

Write code for the TeachersList component, get all the teachers in it and make a list of teachers teachersToRender, let each line of this list display their last name and initials, and in brackets the subject they teach. Let each full name together be a link that leads to a separate page for each teacher. Then at the end of the component code, return the markup with the title and the created list.

At the end of the teachersSlice.js file, create a pair of selector functions selectAllTeachers and selectTeacherById as shown in the tutorial.

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

In the root.jsx file, in the menu for 'Teachers', replace the a tag with NavLink, as shown in the tutorial. Make the active link in the menu stand out somehow by adding styles to index.css.