调度操作并从同一组件中的 Redux 获取状态的最佳实践？

问：

我有一个组件，我在其中调度 get product 操作，该操作通过 slug 获取产品。我通过useSelector从redux store获取结果并显示结果。我收到如下错误： “未捕获的 TypeError：无法读取未定义的属性'primary'”

我认为，这是因为组件在我从 redux 获得产品价值之前就进行了渲染。我的代码如下：

//dependencies
import { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { useParams } from "react-router-dom";

//components
//content container
import ContentContainer from "../ContentContainer";
//title
import Title from "../Title";

//actions
import { getSingleProductAction } from "../../../redux/common/actions/productActions";

const ViewProduct = () => {
    const { product, productLoading } = useSelector(
    (state) => state.productReducer
  );

  const { slug } = useParams();
  const dispatch = useDispatch();
  
  useEffect(() => {
    dispatch(getSingleProductAction(slug));
  }, [slug, dispatch]);

  return (
    <>
      {/************ Title ************/}
      <Title title="View Product" />

      {/************ Content ************/}
      <ContentContainer>
        {productLoading ? (
          <div className="">Loading...</div>
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-5 gap-2 mx-1 pb-3">
            <div className="col-span-1 sm:col-span-2">
              <div className="w-full mb-3">
                <img
                  src={product.images.primary}
                  alt={product.brand + " " + product.model}
                  className="rounded mx-auto sm:mx-0 sm:w-full"
                />
              </div>
              <div className="grid grid-cols-2 gap-1">
                {product.images.secondary.map((img, index) => (
                  <img
                    key={index}
                    className="w-full rounded"
                    src={img}
                    alt={product.brand + " " + product.model}
                  />
                ))}
              </div>
            </div>
            <div className="col-span-1 sm:col-span-3"></div>
          </div>
        )}
      </ContentContainer>
    </>
  );
};

export default ViewProduct;

产品取取后如何渲染组件？我想知道这种情况的最佳实践是什么。

问候