Trying to update deprecated/obsolete code for recent React/Redux versions - reactjs

Question

I have been following a tutorial to make a MERN e-commerce website:
Youtube Video Tutorial: VIDEO
Github containing all the code from the creator of the video: Github
And since it was published at December 2020, I encounter some deprecated/obsolete code that used to work for the creator of the video but doesn't work anymore.
I managed to solve most of the issues but at 3:31:26 of the video, he gets a bug and fixes it easily. The problem is that his solution doesn't make sense and it doesn't work. I have a different error but the error is logically generated. If you look at the video you will notice he does "cartItems.map" but when console logging cartItems it gives me that it is an object. I've tried replacing my code with his, but nothing. Replacing with his Github's code. Neither.
The error I receive when I click on "add to cart" from the product's page
This is where the web browser points to in the code, which is where cartItems is used as an array but it isn't (I also tried [...Array(cartItems)].map and didn't work
CartScreen.jsx
import './CartScreen.css'
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Link } from "react-router-dom";
// Components
import CartItem from "../components/CartItem";
const CartScreen = () => {
const dispatch = useDispatch();
const cart = useSelector(state => state.cart);
const { cartItems } = cart;
return (
<div className='cartscreen'>
<div className='cartscreen__left'>
<h2>Shopping Cart</h2>
{console.log(typeof cartItems)}
{cartItems.length === 0 ? (
<div>
Your Cart is empty <Link to="/">Go Back</Link>
</div>
) : (
cartItems.map((item) =>
<CartItem item={item} />
))}
</div>
<div className='cartscreen__right'>
<div className='cartscreen__info'>
<p>Subtotal (0) items</p>
<p>$499.99</p>
<div>
<button>Proceed to Checkout</button>
</div>
</div>
</div>
</div>
)
}
export default CartScreen;
CartItem.jsx
import "./CartItem.css";
import { Link } from "react-router-dom";
const CartItem = ({ item, qtyChangeHandler, removeHandler }) => {
return (
<div className="cartitem">
<div className="cartitem__image">
<img src={item.imageUrl} alt={item.name} />
</div>
<Link to={`/product/${item.product}`} className="cartItem__name">
<p>{item.name}</p>
</Link>
<p className="cartitem__price">${item.price}</p>
<select
value={item.qty}
onChange={(e) => qtyChangeHandler(item.product, e.target.value)}
className="cartItem__select"
>
{[...Array(item.countInStock).keys()].map((x) => (
<option key={x + 1} value={x + 1}>
{x + 1}
</option>
))}
</select>
<button
className="cartItem__deleteBtn"
onClick={() => removeHandler(item.product)}
>
<i className="fas fa-trash"></i>
</button>
</div>
);
};
export default CartItem;
cartActions.jsx
import * as actionTypes from '../constants/cartConstants';
import axios from 'axios';
export const addToCart = (id, qty) => async (dispatch, getState) => {
const { data } = await axios.get(`/api/products/${id}`);
dispatch({
type: actionTypes.ADD_TO_CART,
payload: {
product: data.id,
name: data.new,
imageURL: data.imageUrl,
price: data.price,
countInStock: data.countInStock,
qty
},
});
localStorage.setItem('cart', JSON.stringify(getState().cart.cartItems));
};
export const removeFromCart = (id) => (dispatch, getState) =>{
dispatch({
type: actionTypes.REMOVE_FROM_CART,
payload: id
});
localStorage.setItem('cart', JSON.stringify(getState().cart.cartItems));
};
ProductScreen.jsx
import "./ProductScreen.css";
import { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { useParams, useNavigate } from "react-router-dom";
// Actions
import { getProductDetails } from "../redux/actions/productActions";
import { addToCart } from "../redux/actions/cartActions";
const ProductScreen = ({ history }) => {
const [qty, setQty] = useState(1);
const dispatch = useDispatch();
const productDetails = useSelector((state) => state.getProductDetails);
const { loading, error, product } = productDetails;
const { id } = useParams();
const navigate = useNavigate();
useEffect(() => {
if (product && id !== product._id) {
dispatch(getProductDetails(id));
}
}, [dispatch, product]);
const addToCartHandler = () => {
dispatch(addToCart(product._id, qty));
navigate("/cart");
};
return (
<div className="productscreen">
{loading ? (
<h2>Loading...</h2>
) : error ? (
<h2>{error}</h2>
) : (
<>
<div className="productscreen__left">
<div className="left__image">
<img src={product.imageUrl} alt={product.name} />
</div>
<div className="left__info">
<p className="left__name">{product.name}</p>
<p>Price: ${product.price}</p>
<p>Description: {product.description}</p>
</div>
</div>
<div className="productscreen__right">
<div className="right__info">
<p>
Price:
<span>${product.price}</span>
</p>
<p>
Status:
<span>
{product.countInStock > 0 ? "In Stock" : "Out of Stock"}
</span>
</p>
<p>
Qty
<select value={qty} onChange={(e) => setQty(e.target.value)}>
{[...Array(product.countInStock).keys()].map((x) => (
<option key={x + 1} value={x + 1}>
{x + 1}
</option>
))}
</select>
</p>
<p>
<button type="button" onClick={addToCartHandler}>
Add To Cart
</button>
</p>
</div>
</div>
</>
)}
</div>
);
};
export default ProductScreen;

Answer 1

Nothing here is an obsolete style that "does not work any more" - if something doesn't work, it's not because of something being discontinued.
In this explicit case you should probably write something like
// change this
{cartItems.length === 0 ? (
// to this
{!cartItems || cartItems.length === 0 ? (
But generally, you are right, this is an outdated style of Redux and you will probably end up writing multiple times the amount of code than you would need to write if you were writing modern code. Modern Redux does not use switch..case reducers, ACTION_TYPES, you will not dispatch actions as objects directly etc. etc.
Please do yourself a favor and follow the official Redux tutorial instead and also look for other sources that teach up-to-date knowledge.