Using Request Status in Redux

In the previous lessons, we used additional reducers to describe what our application should do if fetchProducts sends the pending, fulfilled, and rejected actions when requested. Now we can show the user what stage the data loading is at.

Let's open our product app, and in it the file ProductsList.jsx. The first thing we'll do is create a separate component for the product card ProductCard. We'll do this right after the import lines, before the function ProductsList. We'll pass it product as a prop:

const ProductCard = ({ product }) => {
	return ()
}

Now we'll move all the code for displaying product data from dispProducts into the empty parentheses return:

const ProductCard = ({ product }) => {
	return (
		<div key={product.id} className="product-excerpt">
			<h3>{product.name}</h3>
			<SellerOfProd sellerId={product.seller} />
			<p>{product.desc.substring(0, 100)}</p>
			<UserReactions product={product} />
			<Link to={`/products/${product.id}`} className="link-btn">
				view
			</Link>
		</div>
	)
}

And let's remove the remaining line of code in ProductsList. We don't need it anymore:

const dispProducts = products.map((product) => ())

Now, at the beginning of the ProductsList function code, we'll create a couple more variables, error and content. The first one will be for the error, and we'll write one or another content to the second one depending on the request status. We'll do this before const dataFetch = useRef(false):

const error = useSelector((state) => state.products.error)
let content

Now, before the return command of the ProductsList component, we will write a block of code with conditions under which this or that content will be entered into content depending on the status. First, we will describe the status 'in progress' - when our request has been sent. In this case, we will inform the user that data is being loaded:

if (productStatus === 'in progress') {
	content = <p>Products list loading ...</p>
}

If our loading was successful (we denoted it as 'success'), then we need to output the list of received products. We will output it in map using the ProductCard component, to which we will pass product as props:

if (productStatus === 'in progress') {
	content = <p>Products list loading ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
}

And the last status we have is 'fail'. Let's add it too. We use the variable error here, into which we wrote the error from the state above:

if (productStatus === 'in progress') {
	content = <p>Products list loading ...</p>
} else if (productStatus === 'success') {
	content = products.map((product) => (
		<ProductCard key={product.id} product={product} />
	))
} else if (productStatus === 'fail') {
	content = <div>{error}</div>
}

And the last step is to replace the old {dispProducts} with {content} in the code block for return.

Let's launch our application, click on 'Products' in the menu. Everything works. We see that for about 2 seconds (as we set on the server) under the product addition form we have the inscription 'Products list loading ...', and then a list of products appears.

Open your app with students. Open the file StudentsList.jsx in it. Create a new component StudentCard in it. Move the code from dispStudents into it, as shown in the lesson.

Create variables error and content in the StudentsList function. Assign the content variable the content depending on the request status. Don't forget to replace the old dispStudents with content in the returned markup.