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

홈페이지에서 스크롤 시 콜백함수가 실행되는 과정에서 LOAD_POSTS_REQUEST dispatch 요청을 두 번 보내는 상황이 발생하였는데 해결하지 못해서 올립니다.

/pages/index.js

const Home = () => {
    const dispatch = useDispatch();

    const { me } = useSelector((state) => state.user);
    const { mainPosts, hasMorePosts, loadPostLoading, retweetError } =
        useSelector((state) => state.post);

    useEffect(() => {
        if (retweetError) {
            alert(retweetError);
        }
    }, [retweetError]);

    useEffect(() => {
        dispatch({
            type: LOAD_MY_INFO_REQUEST,
        });
        dispatch({
            type: LOAD_POSTS_REQUEST,
        });
    }, []);

    useEffect(() => {
        function onScroll() {
            if (
                window.scrollY + document.documentElement.clientHeight >
                document.documentElement.scrollHeight - 300
            ) {
                if (hasMorePosts && !loadPostLoading) {
                    console.log('스크롤 패칭');
                    const lastId = mainPosts[mainPosts.length - 1]?.id;
                    console.log('lastId', lastId);
                    dispatch({
                        type: LOAD_POSTS_REQUEST,
                        lastId,
                    });
                }
            }
        }
        window.addEventListener('scroll', onScroll);
        return () => {
            window.removeEventListener('scroll', onScroll);
        };
    }, [hasMorePosts, loadPostLoading, mainPosts]);

    return (
        <AppLayout>
            {me && <PostForm />}
            {mainPosts.map((post) => (
                <PostCard key={post.id} post={post} />
            ))}
        </AppLayout>
    );
};

sagas/post.js

function loadPostsAPI(lastId) {
    return axios.get(`/posts?lastId=${lastId || 0}`);
}
function* loadPosts(action) {
    try {
        const result = yield call(loadPostsAPI, action.data);
        yield put({
            type: LOAD_POSTS_SUCCESS,
            data: result.data,
        });
    } catch (err) {
        yield put({
            type: LOAD_POSTS_FAILURE,
            error: err.response.data,
        });
    }
}

function* watchLoadPosts() {
    yield throttle(5000, LOAD_POSTS_REQUEST, loadPosts);
}

reducers/post.js

case LOAD_POSTS_REQUEST:
    draft.loadPostLoading = true;
    draft.loadPostDone = false;
    draft.loadPostError = null;
    break;
case LOAD_POSTS_SUCCESS:
    draft.loadPostLoading = false;
    draft.loadPostDone = true;
    draft.mainPosts = draft.mainPosts.concat(action.data);
    draft.hasMorePosts = action.data.length === 10;
    break;
case LOAD_POSTS_FAILURE:
    draft.loadPostLoading = false;
    draft.loadPostError = action.error;
    break;

첫 페이지 로딩 후에 스크롤 시 onScroll 함수의 '스크롤 패칭'이 콘솔에 두 번 찍히고 LOAD_POSTS_REQUEST 요청이 두 번 가는 것을 확인했고 처음 포스트들을 불러온 이후에 lastId가 0으로 요청이 보내져서 mainPosts에 중복된 게시물이 쌓이는 문제가 있습니다.