title: TypeError: Cannot destructure property 'cartItems' of 'cart' as it is undefined
body: <p>Again the same tutorial I have a new problem in the cart I am still new to using react redux so thanks for any help for explained I am creating the list of products ordered and counted (after) to be able to modify them added or canceled</p>
  <p>TypeError: Cannot destructure property 'cartItems' of 'cart' as it is undefined.</p>
  <pre><code>import React, { useEffect } from 'react';
  import { addToCart } from '../actions/cartActions';
  import { useDispatch, useSelector } from 'react-redux';
  function CartScreen(props) {
  
      const cart = useSelector(state =&gt; state.cart);
  
      const { cartItems } = cart;
  
      const productId = props.match.params.id;
      const qty = props.location.search ? Number(props.location.search.split(&quot;=&quot;)[1]) : 1;
      const dispatch = useDispatch();
      useEffect(() =&gt; {
        if (productId) {
          dispatch(addToCart(productId, qty));
        }
      }, []);
      return &lt;div className=&quot;cart&quot;&gt;
      &lt;div className=&quot;cart-list&quot;&gt;
        &lt;ul className=&quot;cart-list-container&quot;&gt;
          &lt;li&gt;
            &lt;h3&gt;
              Shopping Cart
            &lt;/h3&gt;
            &lt;div&gt;
              Price
            &lt;/div&gt;
          &lt;/li&gt;
          {
            cartItems.length === 0 ?
              &lt;div&gt;
                Cart is empty
            &lt;/div&gt;
              :
              cartItems.map(item =&gt;
                &lt;li&gt;
                  &lt;div className=&quot;cart-image&quot;&gt;
                    &lt;img src={item.image} alt=&quot;product&quot; /&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;cart-name&quot;&gt;
                    &lt;div&gt;
                      Qty:
                    &lt;select value={item.qty} onChange={(e) =&gt; dispatch(addToCart(item.product, e.target.value))}&gt;
                        {[...Array(item.countInStock).keys()].map(x =&gt;
                          &lt;option key={x + 1} value={x + 1}&gt;{x + 1}&lt;/option&gt;
                        )}
                      &lt;/select&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className=&quot;cart-price&quot;&gt;
                    ${item.price}
                  &lt;/div&gt;
                &lt;/li&gt;
              )
          }
        &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div className=&quot;cart-action&quot;&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  }
  export default CartScreen;
  </code></pre>