I have a card component that has a favourite icon on it. What I want to achieve is that the card would not be opened if favourite icon is clicked and would be opened otherwise. The problem is that Redux action is dispatched after value of that action is checked (at least I think so).

Redux state says isFavIconClicked = true, but calling SetSelectedMovieId() acts as if isFavClicked = false:

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

    } 

Full code:

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;

How should I solve it? Thanks