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

const wait = (timeToDelay) =>
  new Promise((resolve) => setTimeout(resolve, timeToDelay));

export const loginAction = createAsyncThunk(LOG_IN, async (data) => {
  await wait(1000);
  return data;
});

export const logoutAction = createAsyncThunk(LOG_OUT, async () => {
  
  return;
});

const userSlice = createSlice({
  name: "user",
  initialState,
  // exraReducers 그냥 reducer는 user/login 이런식으로 액션 이름을 적어야 하지만 extraReducers를 사용하면 login으로 줄일 수 있다
  extraReducers: (builder) =>
    builder
      .addCase([HYDRATE], (state, action) => ({
        ...state,
        ...action.payload.user,
      }))
      .addCase(loginAction.pending, (state) => {
        state.isLoggingIn = true;
        state.isLoggedIn = false;
      })
      .addCase(loginAction.fulfilled, (state, action) => {
        state.isLoggingIn = false;
        state.isLoggedIn = true;
        state.user = dummyUser;
        state.loginData = action.data;
      })
      .addCase(loginAction.rejected, (state) => {
        state.isLoggingIn = true;
      })
      .addCase(logoutAction.pending, (state) => {
        state.isLoggingOut = true;
        state.isLoggedIn = true;
      })
      .addCase(logoutAction.fulfilled, (state) => {
        state.isLoggingOut = false;
        state.isLoggedIn = false;
        state.user = null;
      })
      .addCase(logoutAction.rejected, (state) => {
        state.isLoggingOut = false;
      })
      .addCase(signUp.fulfilled, (state, action) => {
        state.signUpData = action.data;
      })
      .addDefaultCase((state) => state),
});

제가 redux toolkit으로 제로초님이 만드시는 코드를 만들고 있는데 createAsyncThunk로 일부러 지연 시켜서 pending상태로 만들려고 했는데 이렇게 코드를 짜니까 pending이 제대로 동작을 안하고 로딩 아이콘이 제대로 보이지 않습니다 제가 추가적으로 실험을 해보았는데 state.isLoggingIn을 pending과 fulfilled두개 모두 state.isLoggingIn = true;로하고 동작을 시켜도 로그인 아이콘이 로딩이 안됩니다 하지만 로그아웃은 모두 true로 하니까 로딩이 보입니다...

그래서 액션을 reducer를 작성할때 뭔가를 실수한것 같습니다 무었인지 알 수 있을까요?

그리고 saga의 delay처럼 createAsyncThunk의 지연시켜서 pending상태가 나오는 방법을 알고싶습니다