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

Posted 2023-03-17

【中文标题】调度操作并从同一组件中的 redux 获取状态的最佳实践？

【英文标题】：best practices for dispatch an action and get the state from redux in same component?

【发布时间】：2021-10-28 04:25:29

【问题描述】：

我有一个组件，我在其中调度 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;

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

问候

【参考方案1】：

您可以使用 AND 逻辑运算符首先检查产品是否为真，然后呈现 html。

  productLoading ? (
      <div className="">Loading...</div>
    ) : product && (      //check here
      <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
              />
            ))

在 javascript 中，expression1 && expression2 的处理方式如下：

如果表达式1为真，则返回表达式2。

如果表达式 1 是假的（null 或未定义），则返回第一个表达式。 （在 React 中 null 或 undefined 被渲染为空）

【讨论】：

我已经试过了。但结果是一样的。