Estoy trabajando en una aplicación React-Redux.

Obtengo una URL de imagen aleatoria de la API de Unsplash y tengo dos opciones: aprobarla o rechazarla. onApprove la imagen aterriza en una galería.

Noté que si hago clic en el botón Aprobar rápidamente varias veces, coloco imágenes duplicadas en mi galería. Sé que en React puedes hacer algo como esto para poder manejar acciones.

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

Pero aquí viene Redux. Uso createSlice() para encargarme de los reductores. Aquí está el fragmento de código con la funcionalidad

 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); }, }, });

Y luego envío una acción en mi pie de página donde los botones son:

 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> ); }

Entonces, ¿cómo puedo evitar la duplicación de imágenes onClick? ¡Gracias!

ADEMÁS: Tengo una pregunta:

cuando obtengo datos de la API, solo obtengo imageUrl. Eso significa que no estoy verificando Ids en mi código, sino solo imageUrls. No sé si también podría ser el motivo de los duplicados, pero ¿tengo que buscar los ID y verificarlos con .includes() también?