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

안녕하세요 제로초님!

    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]);

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

이렇게 두번 REQUEST를 보내게 됩니다.

리덕스를 찍어봤을 때는

이렇게 나옵니다.

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를 보내는 것이 아닌가 하는게 제 추측인데요, 맞을까요?ㅠㅠ

    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]);