REQUEST를 실행해도 loadPostLoading이 바로 바뀌... - 인프런

[리뉴얼] React로 NodeBird SNS 만들기

인피니트 스크롤링 적용하기

REQUEST를 실행해도 loadPostLoading이 바로 바뀌지 않습니다.

작성

322

수정됨

안녕하세요 제로초님!

    const { mainPosts, hasMorePosts, loadPostsLoading } = useSelector(
        (state) => state.post,
    );

    useEffect(() => {
        function onScroll() {
            if (
                window.scrollY + document.documentElement.clientHeight >
                document.documentElement.scrollHeight - 300
            ) {
                if (hasMorePosts && !loadPostsLoading) {
                    console.log('로딩상태 ; ', loadPostsLoading);
                    console.log('불러오기');
                    dispatch({
                        type: LOAD_POSTS_REQUEST,
                    });
                }
            }
        }
        window.addEventListener('scroll', onScroll);
        return () => {
            window.removeEventListener('scroll', onScroll);
        };
    }, [hasMorePosts, loadPostsLoading]);

현재 여기까지 코딩이 진행된 상태인요! 콘솔로 찍어보니

스크린샷 2023-04-19 오후 4.11.30.png 이렇게 두번 REQUEST를 보내게 됩니다.

리덕스를 찍어봤을 때는

스크린샷 2023-04-19 오후 4.18.05.png

스크린샷 2023-04-19 오후 4.18.28.png 이렇게 나옵니다.

reducers 부분은

const reducer = (state = initialState, action) =>
    produce(state, (draft) => {
        switch (action.type) {
            case LOAD_POSTS_REQUEST:
                draft.loadPostsLoading = true;
                draft.loadPostsDone = false;
                draft.loadPostsError = null;
                break;
            case LOAD_POSTS_SUCCESS:
                draft.loadPostsLoading = false;
                draft.loadPostsDone = true;
                draft.mainPosts = action.data.concat(draft.mainPosts);
                draft.hasMorePosts = draft.mainPosts.length < 50;
                break;
            case LOAD_POSTS_FAILURE:
                draft.loadPostsLoading = false;
                draft.loadPostsError = action.error;
                break;
            ...

saga > post.js 코드는

function loadPostsAPI(data) {
    return axios.get('/api/post', data);
}

function* loadPosts(action) {
    try {
        // const result = yield call(loadPostsAPI, action.data)
        yield delay(1000);
        const id = shortid.generate();
        yield put({
            type: LOAD_POSTS_SUCCESS,
            data: generateDummyPost(10),
        });
    } catch (err) {
        yield put({
            type: LOAD_POSTS_FAILURE,
            data: err.response.data,
        });
    }
}

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

이 상태입니다.

조건문에서 !loadPostsLoading < 이걸 지우면 엄청난 양으로 REQUEST가 보내지는 것을 보니 !loadPostsLoading 이게 먹히는 것 같기는 합니다.

왠지 REQUEST가 보내진 후 loadPostsLoading이 true로 변경된 것 같기는 한데 이게 useEffect 코드에서는 아직 false로 인식해서 또 REQUEST를 보내는 것이 아닌가 하는게 제 추측인데요, 맞을까요?ㅠㅠ

react redux node.js express next.js

답변 2

rud167637

저도 같은 에러엿는데 도움많이됫습니다!

제 추측이지만 addEventListner한 상태에서

dispatch가 비동기로 실행되는 동안 빠른시간내에 scroll이벤트를 두번 부른거 같더라구요 그래서 onec라는 변수를 둬서 useEffect실행되기 전에 한번만 실행하게끔 했더니 깔끔하게 REQUEST를 한번만 실행했습니다.

    useEffect(() => {
    let onec = false;
    function onScroll() {
      const scrollpos = window.scrollY + document.documentElement.clientHeight;
      if (scrollpos > document.documentElement.scrollHeight - 300) {
        if (hasMorePosts && !LoadPostLoading && !onec) {
          onec = true;
          console.log('LOADPOSTLOADING', LoadPostLoading);
          console.log('hasmor', hasMorePosts);
          dispatch({
            type: LOAD_POST_REQUEST,
          });
        }
      }
    }
    window.addEventListener('scroll', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
    };
  }, [hasMorePosts, LoadPostLoading]);

제로초(조현영)

지식공유자

setState나 redux에서 state를 바꾸는 행동은 모두 비동기로 일어납니다. 지금 동작이 맞고요. hasMorePost도 함께 console.log찍어보세요. 둘 중에 하나만 바뀌어도 useEffect는 다시 실행되므로 그 점도 체크해보아야 합니다.

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

REQUEST를 실행해도 loadPostLoading이 바로 바뀌지 않습니다.