Tengo un componente de tarjeta que tiene un ícono favorito. Lo que quiero lograr es que la tarjeta no se abra si se hace clic en el ícono favorito y se abra de lo contrario. El problema es que la acción Redux se envía después de que se verifica el valor de esa acción (al menos eso creo).

El estado de Redux dice isFavIconClicked = true , pero llamar a SetSelectedMovieId() actúa como si isFavClicked = false :

 const SetSelectedMovieId = (movieId: number) => { if (!isFavClicked) { dispatch(isMoviePageOpened(true)); dispatch(changeSelectedMovie(movieId)); }

Código completo:

 const Card: React.FC<Props> = ({ card }: Props) => { const dispatch = useDispatch(); const searchedMovie = useSelector((state: RootState) => state.searchedMovie); const isFavClicked = useSelector((state: RootState) => state.isFavIconClicked); const SetIsFavouriteIconClicked = (isFavIconClicked: boolean) => { dispatch(isFavouriteIconClicked(isFavIconClicked)); }; const SetSelectedMovieId = (movieId: number) => { if (!isFavClicked) { dispatch(isMoviePageOpened(true)); dispatch(changeSelectedMovie(movieId)); } else { SetIsFavouriteIconClicked(false); } }; const AddFavouriteMovie = (movieId: number) => { SetIsFavouriteIconClicked(true); dispatch(addFavouriteMovie(movieId)); }; return ( <Grid item key={card.id}> <NavLink to={'/movie/' + card.id} className="trial"> <div className={`card-container ${ searchedMovie && 'card-container-when-search' }`} onClick={() => SetSelectedMovieId(card.id)} > <img className="card-poster" alt={'Poster of ' + card.title} src={ card.poster_path ? card.poster_path.includes('.jpg') ? posterBaseUrl + card.poster_path : noImage : noImage } title={card.title} /> <div className="card-details"> <div className="title"> <FavoriteBorderIcon onClick={() => AddFavouriteMovie(card.id)} /> </div> <div className="details">{card.vote_average}</div> </div> </div> </NavLink> </Grid> ); }; export default Card;

¿Cómo debo solucionarlo? Gracias