使用 useSelector 钩子将每个子 React 组件的状态分开答案

【问题标题】：Separate states per child React component with useSelector hook使用 useSelector 钩子将每个子 React 组件的状态分开
【发布时间】：2020-11-08 21:38:32
【问题描述】：

我有一个加载图像的应用程序，我想点击一个竖起大拇指的图标来“喜欢”和图像或垃圾箱图标来删除图像。虽然对后端的调用未决，但我想显示一个微调器而不是图标。当从商店获取我的调用的加载状态时，我的所有组件都会同时更新，而不是仅仅针对我正在点击的当前组件

如下图（点赞按钮后出现微调框）

如您所见，微调器出现在每个ImageCard!!!

ImageCard.tsx

export function ImageCard({ image }: ImageProp): ReactElement {
    const [liked, setLiked] = useState(image.tags.includes(TAGS.FAV));
    const imageLikeState = useSelector(likeImagePending);
    const imageDeleteState = useSelector(deleteImagePending);

    const dispatch = useDispatch();
    const like = (public_id: string, tag: string) => {
        setLiked(!liked);
        dispatch(toggleLiked(public_id, tag));
    };
    const deleteImage = (public_id: string) => {
        dispatch(deleteImageCall(public_id));
    };

    return (
        <div className="card mb-5 portfolio-item">
            <div className="card-image">
                <img className="image" src={image.secure_url} alt="" />
            </div>
            <div className="card-button-container">
                {!imageDeleteState && (
                    <FontAwesomeIcon
                        onClick={() => deleteImage(image.public_id)}
                        icon={trashRegular}
                        size="lg"
                        color="#FF4545"
                    />
                )}

                {imageDeleteState && <img className="spinner" src={Spinner} alt="Loading Spinner" />}

                <div className="rating-container">
                    <FontAwesomeIcon icon={starRegular} size="lg" color="#FF9529" />
                    <FontAwesomeIcon icon={starRegular} size="lg" color="#FF9529" />
                    <FontAwesomeIcon icon={starRegular} size="lg" color="#FF9529" />
                    <FontAwesomeIcon icon={starRegular} size="lg" color="#FF9529" />
                    <FontAwesomeIcon icon={starRegular} size="lg" color="#FF9529" />
                </div>

                {!imageLikeState && (
                    <FontAwesomeIcon
                        onClick={() => like(image.public_id, TAGS.FAV)}
                        icon={liked ? heartSolid : heartOutline}
                        size="lg"
                        color="#1A8CC9"
                    />
                )}

                {imageLikeState && <img className="spinner" src={Spinner} alt="Loading Spinner" />}
            </div>
        </div>
    );
}

【问题讨论】：

标签： reactjs react-redux react-hooks redux-toolkit

【解决方案1】：

const imageLikeState = useSelector(likeImagePending);
const imageDeleteState = useSelector(deleteImagePending);

基于此，您似乎有一个选择器，可以告诉您 any 图像是否处于待处理状态。你想要的是一个选择器，它告诉你一个特定的图像ID是否处于待处理状态。

组件代码应该是这样的

const imageLikeState = useSelector(likeImagePending(image.public_id));
const imageDeleteState = useSelector(deleteImagePending(image.public_id));

这意味着您需要更改选择器，可能还需要更改 redux 状态。如果您当前存储的 boolean 值为 isLikePending，一个简单的解决方案是更改它，以便存储在您的 redux 状态中的值是待处理的图像的数字 id，如果没有待处理，则为 false .

您的选择器将检查您在参数中传递的 id 是否与待处理的 id 匹配并返回 boolean。

const isLikePending = (id) => (state) => {
   return state.isLikePending === id;
}

【讨论】：