-
카테고리
-
세부 분야
풀스택
-
해결 여부
해결됨
스크롤 시 dispatch 중복 요청 에러 질문 있습니다.
23.08.02 23:57 작성 조회수 193
0
홈페이지에서 스크롤 시 콜백함수가 실행되는 과정에서 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에 중복된 게시물이 쌓이는 문제가 있습니다.
답변을 작성해보세요.
답변 1