-
카테고리
-
세부 분야
풀스택
-
해결 여부
미해결
redux toolkit을 사용해서 throttling설절을 어떻게 할 수 있나요?
23.07.03 19:59 작성 조회수 281
0
아래 질문(reduxjs/toolkit 에서 loadPost 한번만 가게하기)에서 비슷한 내용의 질문이 올라왔는데
delay란 함수를 어떻게 설정하는지 잘 이해가 안되서 질문드립니다
답변을 작성해보세요.
0
조현영
지식공유자2023.07.03
링크 남겨주실 수 있나요? 아래 질문이 뭔지 모르겠습니다.
일단 다음 api가 쓰로틀링 용으로 추가되긴 했습니다.
https://redux-toolkit.js.org/api/createListenerMiddleware
i1004gy
질문자2023.07.04
이 링크 입니다
여기에서 쓰이는 delay가 무었인지 그리고 제로초님 깃허브에서는
export const loadPosts = createAsyncThunk('post/loadPosts', _.throttle(loadPostsThrottle, 5000));
이렇게 쓰로틀링을 하셨던데 delay와 throttle은 무슨 차이인지 궁금합니다
조현영
지식공유자2023.07.04
delay는 다음 함수일 것 같고요. 쓰로틀링과 상관 없습니다.
function delay(sec) { return new Promise((res, rej) => { setTimeout(res, sec); }) }
_.throttle은 진짜 lodash에 있는 쓰로틀링하는 함수입니다.
i1004gy
질문자2023.07.04
reducers/user.js
const loadPostsThrottle = async (data) => {
const response = generateDummpyPost(data);
return response;
};
export const loadPosts = createAsyncThunk(
LOAD_POST,
_.throttle(loadPostsThrottle, 5000)
);
const postSlice = createSlice({
name: "post",
initialState,
extraReducers: (builder) =>
builder
.addCase([HYDRATE], (state, action) => ({
...state,
...action.payload.post,
// loadPosts
.addCase(loadPosts.pending, (state, action) => {
state.loadPostsLoading = true;
state.loadPostsDone = false;
})
.addCase(loadPosts.fulfilled, (state, action) => {
state.mainPosts = action.payload.dummypost.concat(state.mainPosts);
state.hasMorePost = state.mainPosts.length < 50;
state.loadPostsLoading = false;
state.loadPostsDone = true;
})
.addCase(loadPosts.rejected, (state, action) => {
state.loadPostsLoading = false;
state.loadPostsError = action.error;
})
.addDefaultCase((state) => state),
});
page/index.js
useEffect(() => {
dispatch(loadPosts(10));
}, [dispatch]);
useEffect(() => {
function onScroll() {
console.log(
window.scrollY,
document.documentElement.clientHeight,
document.documentElement.scrollHeight
);
if (
window.scrollY + document.documentElement.clientHeight >
document.documentElement.scrollHeight - 300
)
if (hasMorePost && !loadPostsLoading) {
const dummypost = generateDummpyPost(10);
dispatch(loadPost({ dummypost }));
}
}
window.addEventListener("scroll", onScroll);
return () => {
window.removeEventListener("scroll", onScroll);
};
}, [hasMorePost]);
이렇게 제로초님의 깃허블르 참고 해서 만들어봤는데
일단 redux devtools에서 보면 pending에서 넘어가질 않습니다 action에 10라는 값만 담겨서 나가는 것 같습니다 어떻게 고치면 좋을까요?
조현영
지식공유자2023.07.04
일단 제가 말씀드린대로
https://redux-toolkit.js.org/api/createListenerMiddleware
새로운 api 통해서 하시는 게 좋습니다.
제가 봤을 때는 loadPostsThrottle이 async function일 이유가 없어보이네요. 그것 말고는 코드 이슈는 모르겠습니다.
i1004gy
질문자2023.07.04
제가 질문한 코드에서 가장 큰 문제가 action.payload에 dummyUser가 안들어간다는 겁니다
const loadPostsThrottle = async (data) => {
const response = generateDummpyPost(data);
return response;
};
이 코드의 의도는 return response를 해서 action에 response가 담기는것이 의도인데 action.payload에 여전히 10이 담겨 있어서
.addCase(loadPosts.fulfilled, (state, action) => {
state.mainPosts = action.payload.dummypost.concat(state.mainPosts);
state.hasMorePost = state.mainPosts.length < 50;
state.loadPostsLoading = false;
state.loadPostsDone = true;
이부분 concat에서 오류가 남니다
답변 1