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

제로초쌤 강의를 들으면서 redux, redux-saga로 작성하신걸 깃헙 소스코드 참고하고 스스로 해보면서 toolkit으로 변환하면서 해보고 있는데 toolkit에서는 따로 한번만 요청이 가게 할 수 없나요..?

제 코드 첨부하겠습니다

<pages > index.js>

    useEffect(() => {
        function onScroll(){
            console.log(window.scrollY, document.documentElement.clientHeight, document.documentElement.scrollHeight);
            if(window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300){
                if(hasMorePosts && !loadPostsLoading){
                    dispatch(loadPost(10));
                    console.log(loadPostsLoading);
                }
            }
        }
        window.addEventListener('scroll', onScroll);
        return () => {
            window.removeEventListener('scroll', onScroll);
        }
    }, [hasMorePosts])

<actions > post.js>

export const loadPost = createAsyncThunk('post/loadPosts' , async (data , thunkAPI) => {
    try{
        const result = await delay(getDummyPost(data), 1000);
        return result;
    }
    catch(error){
        console.log(error);
    }
});

<reducers > postSlice.js>

      .addCase(loadPost.pending, (state, action) => {
          state.loadPostsLoading = true;
          state.loadPostsDone = false;
          state.loadPostsError = null;
      })
      .addCase(loadPost.fulfilled, (state, action) => {
          state.loadPostsLoading = false;
          state.loadPostsDone = true;
          state.mainPosts = action.payload.concat(state.mainPosts);
          state.hasMorePosts = action.payload.length < 100;
      })
      .addCase(loadPost.rejected, (state, action) => {
          state.loadPostsLoading = false;
          state.loadPostsError = action.error;
      })