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

제가 이번에 loadPosts를 createAsyncThunk로 구현하면서 createAsyncThunk의 진행 순서가 궁금해서 질문 드립니

index.js
 
 useEffect(() => {
    console.log("dipathch hi");
    dispatch(loadPosts(10));
  }, [dispatch]);

reducers/post.js
export const loadPosts = createAsyncThunk(LOAD_POST, async (data) => {
  trottle();
  return data;
});
const trottle = () =>
  listenerMiddleware.startListening({
    type: LOAD_POST,
    effect: async (action, listenerApi) => {
      listenerApi.unsubscribe();
      console.log("Original state ", listenerApi.getOriginalState());
      await listenerApi.delay(5000);
      console.log("Current state ", listenerApi.getState());
      listenerApi.subscribe();
    },
  });
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) => {
        action.payload = generateDummpyPost(action.payload);
        state.mainPosts = action.payload.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),
});

제가 하나하나 console.log를 찍어서 확인한 진행 순서를 얘기해 드리겠습니다

일단 화면을 처음 랜더링할때 index.js에서 dispatch가 제일 먼저 실행됩니다 그리고 post.js로 넘어와서 loadPost.pending -> loadPosts.fulfilled ->loadPosts = createAsyncThunk(LOAD_POST) 이 순서대로 진행이 됩니다 그래서 loadPosts.fulfilled에 generateDummpyPost()함수를 작성한 것입니다

그래서 마지막에 createAsyncThunk가 실행이 되니 return이 필요없지 않나? 라는 생각에 return을 지워봤더니 post가 하나만 작성되고 그 이후는 작성되지 않았습니다

제가 궁금한 부분은 세개입니다

1. createAsyncThunk의 정확한 진행순서가 궁금합니다

2. generateDummpyPost()함수를 저렇게 작성하는게 맞는지 궁금합니다

3. https://blog.logrocket.com/redux-toolkits-new-listener-middleware-vs-redux-saga/ 에서 Throttling관련 얘기가 있어서 똑같이 따라 해봤는데 쓰로틀링을 createAsyncThunk에 장착하는 방법을 잘 모르겠습니다 쓰로틀링이 없어도 윈도우 이밴트로 요청이 한번에 많이 오는 현상은 없지만 그래도 궁금해서 질문 드립니다