23.04.19 16:24 작성
·
318
·
수정됨
0
안녕하세요 제로초님!
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를 보내는 것이 아닌가 하는게 제 추측인데요, 맞을까요?ㅠㅠ
답변 2
0
저도 같은 에러엿는데 도움많이됫습니다!
제 추측이지만 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]);
0
2023. 04. 19. 16:54
setState나 redux에서 state를 바꾸는 행동은 모두 비동기로 일어납니다. 지금 동작이 맞고요. hasMorePost도 함께 console.log찍어보세요. 둘 중에 하나만 바뀌어도 useEffect는 다시 실행되므로 그 점도 체크해보아야 합니다.