인프런 커뮤니티 질문&답변

4셉터 마지막 팔로우 부분 질문입니다.

팔로우 버튼 클릭시 모든 글 들이 로딩중 표시가 뜨구요 제가 sagas followrequest type 에서 action.data를 console로 받아본 결과 제가 클릭한 post id값이 들어오긴하는데 그 값이 계속 무한루프로 들어와요 리덕스 diff 값은 FOLLOW_REQUEST 만 계속 도는 에러입니다. 

버튼 클릭과 동시에 모든 글의 버튼에서 로딩중 표시가 뜬다는건 followButton.js onclick 부분이 잘못되나 싶다가도 

클릭한 해당 글의 id값은 잘들어오는데 똑같은 값이 무한루프로 해당 액션 type에 값이 들어오는경우는 도대체 뭔지모르겠네요ㅠㅠ..  

 

FollowButton.js, reduce user.js saga user.js  파일 해당 관련 로직 올려 드리겠습니다. ㅠㅠ

const FollowButton = ({ post }) => {
    const dispatch = useDispatch();
    const { me, followLoading, unfollowLoading } = useSelector((state) => state.user);
    const isFollowing = me?.Followings.find((v) => v.id === post.User.id);

    const onClickButton = useCallback(() => {
        if (isFollowing) {
            dispatch({
                type: UNFOLLOW_REQUEST,
                data: post.User.id,
            });
        } else {
            dispatch({
                type: FOLLOW_REQUEST,
                data: post.User.id,
            });
        }
    }, [isFollowing]);

    return (
        <Button loading={followLoading || unfollowLoading} onClick={onClickButton}>
            {isFollowing ? '언팔로우' : '팔로우'}
        </Button>
    );
};

case FOLLOW_REQUEST : // 팔로우 요청
    draft.followLoading = true;
    draft.followError = null;
    draft.followDone = false;
    break;
case FOLLOW_SUCCESS : //팔로우 성공
    draft.followLoading = false;
    draft.followDone = true;
    draft.me.Followings.push({ id: action.data });
    break;
case FOLLOW_FAILURE : //팔로우 실패
    draft.followLoading = false;
    draft.followError = action.error; //로그인 실패 확인
    break;

function* follow(action) {

    try {

        yield delay(1000);
        //const reuslt = yield call(followAPI, action.data);
        yield put({
            type: FOLLOW_SUCCESS,
            data : action.data,
        });
    } catch (e) {
        console.log(e);
        yield put({
            type: FOLLOW_FAILURE,
            data: e.response.data,
        });
    }
}