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

【问题标题】：best practices for dispatch an action and get the state from redux in same component?调度操作并从同一组件中的 redux 获取状态的最佳实践？
【发布时间】：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;

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

问候

【问题讨论】：

标签： reactjs redux use-effect dispatch

【解决方案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 被渲染为空）

【讨论】：

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