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

https://www.inflearn.com/questions/758385/reduxjs-toolkit-%EC%97%90%EC%84%9C-loadpost-%ED%95%9C%EB%B2%88%EB%A7%8C-%EA%B0%80%EA%B2%8C%ED%95%98%EA%B8%B0

이 링크 입니다

여기에서 쓰이는 delay가 무었인지 그리고 제로초님 깃허브에서는

export const loadPosts = createAsyncThunk('post/loadPosts', _.throttle(loadPostsThrottle, 5000));

이렇게 쓰로틀링을 하셨던데 delay와 throttle은 무슨 차이인지 궁금합니다

delay는 다음 함수일 것 같고요. 쓰로틀링과 상관 없습니다.

function delay(sec) { return new Promise((res, rej) => { setTimeout(res, sec); }) }

_.throttle은 진짜 lodash에 있는 쓰로틀링하는 함수입니다.

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라는 값만 담겨서 나가는 것 같습니다 어떻게 고치면 좋을까요?

일단 제가 말씀드린대로

https://redux-toolkit.js.org/api/createListenerMiddleware

새로운 api 통해서 하시는 게 좋습니다.

제가 봤을 때는 loadPostsThrottle이 async function일 이유가 없어보이네요. 그것 말고는 코드 이슈는 모르겠습니다.

제가 질문한 코드에서 가장 큰 문제가 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에서 오류가 남니다

fulfilled가 실행도 안 된다고 하지 않으셨나요? console.log(action)부터 해서 action 객체부터 봐보세요.