안녕하세요, 리덕스를 통해서 좋아요 기능구현을 해보고 있는데 디스패치와 충돌이 나는것 같습니다.

const CourseReviewItems = ({ coursePostReviewPosts, post, currentIndex, pageId, postId }) => {

    const starRendering = (star) => {

        const stars = [];
        for (let i = 0; i < star; i++) {
            stars.push(<span key={`fill_stars_${i}`}><FontAwesomeIcon icon={faStar} className={styles.fill_stars} /></span>)
        }

        for (let i = 0; i < 5 - star; i++) {
            stars.push(<span key={`empty_stars_${i}`}><FontAwesomeIcon icon={regStar} className={styles.empty_stars} /></span>)
        }

        return stars
    }


    return (
        <>
            <div className={styles.dt_review_item}>
                <div className={styles.dt_review_top}>
                    <div className={styles.dt_review_profile_cont}>
                        <figure>
                            <Image src={profileImg} alt="닉네임" />
                        </figure>

                        <div className={styles.dt_review_profile}>
                            <div className={styles.dt_review_star_cont}>
                                <div className={styles.dt_review_star}>
                                    {starRendering(coursePostReviewPosts.point)}
                                </div>
                                <span>{coursePostReviewPosts.point}</span>
                            </div>
                            <div className={styles.dt_review_txt}>
                                <span className={styles.dt_review_user}><b>{coursePostReviewPosts.User.name}</b>{`(${coursePostReviewPosts.User.id})`}</span>
                                <b> · </b>
                                <span>{coursePostReviewPosts.date}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div className={styles.dt_review_content}>
                    <p>{coursePostReviewPosts.content}</p>
                </div>

                <div className={styles.dt_review_bottom}>
                    <Heart id={post} pageId={pageId} currentIndex={currentIndex} postId={postId} />
                </div>
            </div>

        </>
    );
};

const Heart = ({ pageId, id, currentIndex, postId }) => {
    const dispatch = useDispatch();
    const { coursePosts } = useSelector((state) => state.coursePost);
    const [clicked, setClicked] = useState(false);


    const heart = coursePosts[currentIndex].CourseReview[id].heart;
    console.log(clicked)
    const onClickHeart = () => {
        // if (!clicked) {
        //     dispatch(coursePostActions.clickCourseReviewHeart({ pageId, postId }))
        //     console.log("true")

        // } else {
        //     dispatch(coursePostActions.clickCourseReviewHeartAgain({ pageId, postId }))
        //     console.log("false")

        // }
        setClicked((p) => !p);
        console.log("dfdf", clicked)
        dispatch(coursePostActions.clickCourseReviewHeart({ pageId, postId }))


    }
    console.log(clicked)
    return (
        <button type="button" onClick={onClickHeart} className={clicked === true ? styles.active : ""}>
            <FontAwesomeIcon icon={faHeart} />
            <span>{heart}</span>
        </button>
    );
};

export default CourseReviewItems;

setClicked((p) => !p) 하시면 됩니다.