[Error] createSlice의 reducers에서 async 함수를 사용

createSlice의 reducers에서 async 함수를 사용할 경우, 해당 reducer는 CaseReducerWithPrepare 타입으로 선언되어야 한다. 따라서 setJwtTokens reducer의 타입을 다음과 같이 변경해야한다.

setJwtTokens: {
  reducer: (state: UserState, action: PayloadAction<JwtTokens>) => {
    const { accessToken, refreshToken } = action.payload;
    try {
      isValidJWT(accessToken, true);

      const payload = decodePayloadFromJWT<JWTPayload>(accessToken);
      const payloadRefresh =
        decodePayloadFromJWT<JWTPayload>(refreshToken);
      storeData(ACCESS_TOKEN_STORAGE_KEY, accessToken);
      storeData(REFRESH_TOKEN_STORAGE_KEY, refreshToken);
      state.accessToken = accessToken;
      state.refreshToken = refreshToken;
      state.userData = payload.info;
      state.userLoginTime = payloadRefresh;
    } catch (e) {
      console.error('Error발생', e);
    }
  },
  prepare: (payload: JwtTokens) => {
    return { payload };
  },
},

이와 함께, setJwtTokens reducer가 Promise를 반환하고 있으므로, 반환 타입을 void 대신 Promise<void>로 변경해야 한다. 최종적으로는 다음과 같은 형태가 되어야 한다.

setJwtTokens: {
  reducer: (state: UserState, action: PayloadAction<JwtTokens>) => {
    const { accessToken, refreshToken } = action.payload;
    try {
      isValidJWT(accessToken, true);

      const payload = decodePayloadFromJWT<JWTPayload>(accessToken);
      const payloadRefresh =
        decodePayloadFromJWT<JWTPayload>(refreshToken);
      storeData(ACCESS_TOKEN_STORAGE_KEY, accessToken);
      storeData(REFRESH_TOKEN_STORAGE_KEY, refreshToken);
      state.accessToken = accessToken;
      state.refreshToken = refreshToken;
      state.userData = payload.info;
      state.userLoginTime = payloadRefresh;
    } catch (e) {
      console.error('Error발생', e);
    }
  },
  prepare: (payload: JwtTokens) => {
    return { payload };
  },
  // 반환 타입을 Promise<void>로 변경
  async: true,
},