如何避免在 Redux 中单击时出现重复的图像 url答案

【问题标题】：How to avoid duplicate image urls on click in Redux如何避免在 Redux 中单击时出现重复的图像 url
【发布时间】：2021-10-14 21:17:57
【问题描述】：

我正在开发一个 React-Redux 应用程序。

我从 Unsplash API 获取一个随机图像 URL，并有两个选项：批准或拒绝。 onApprove 图像进入图库。

我注意到，如果我多次快速单击“批准”按钮，我会将重复的图像放入我的图库中。我知道在 React 中你可以做这样的事情来处理动作

setState(prevState) => {return prevState + 1}

但是 Redux 来了。我使用 createSlice() 来处理减速器。这是带有功能的代码sn-p

const imagesSlice = createSlice({
  name: 'images',
  // The intial state value we pass for the reducers. A state the first time it gets called.
  initialState,
  reducers: {
    imageApproved(state, action) {
      state.approvedImageList.push(action.payload);
    },
  },
});

稍后我在按钮所在的页脚中调度一个动作：

function Footer({ randomImageUrl, generateNewRandomImage }) {
  const dispatch = useDispatch();

  function onApprove() {
    dispatch(imageApproved(randomImageUrl));
    generateNewRandomImage();
  }


  const showButton = useSelector((state) => state.buttons.showButton);

  return (
    <FooterWrapper>
      {showButton ? (
        <FooterCopy>
          Click on the + in order to get image recommendations
        </FooterCopy>
      ) : (
        <ButtonWrapper>
          <Button bgColorOnHover='true' onClick={onApprove}>
            APPROVE
          </Button>
        </ButtonWrapper>
      )}
    </FooterWrapper>
  );
}

那么我怎样才能避免在点击时重复图片呢？谢谢！

加：我有一个问题：

当我从 API 获取数据时，我只获取 imageUrl。这意味着我没有在我的代码中检查 Id，而只是检查 imageUrls。 Idk 是否也可能是重复的原因，但我是否必须获取 Id 并使用 .includes() 检查它们？

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

这里没有特定于 redux 的内容：

    imageApproved(state, action) {
      if (!state.approvedImageList.includes(action.payload)) {
        state.approvedImageList.push(action.payload);
      }
    },

【讨论】：

【解决方案2】：

推送前可以查看approvedImageList中的新Url或者不查看：

imageApproved(state, action) {
  const url = action.payload;
  if(!state.approvedImageList.includes(url)){
    state.approvedImageList.push(url);
  }
},

【讨论】：

谢谢，我认为它解决了我的问题。您能否也回答这个问题：当我从 API 获取数据时，我只获取 imageUrl。这意味着我没有在我的代码中检查 Id，而只是检查 imageUrls。 Idk 是否也可能是重复的原因，但我是否必须获取 Id 并使用 .includes() 检查它们？