inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] 타입스크립트 올인원 : Part2. 실전 분석편

AxiosError와 unknown error 대처법

안녕하세요 제로초님 질문있습니다!

398

suhwooms dev

작성한 질문수 4

0

안녕하세요.

제로초님 저는 redux toolkit으로 axios error처리 하려고 합니다!.

 

플로우는 createAsyncThunk에서 login액션으로 왔을 때 catch로 error를 잡아준 뒤 reducer에서

  .addCase(login.rejected, (state, action: PayloadAction<any>) => {
        state.loginError = action.payload;
      })

loginError로 에러 메시지가 들어오게 하는것입니다.

먼저

catch에서는

export const login = createAsyncThunk(
...

} catch (error) {
      if (axios.isAxiosError(error)) {
        console.error((error as AxiosError<{message: string}>).response?.data.message)
      }
      return rejectWithValue(error.message); << Object is of type 'unknown'.
    }

 

강의대로 요렇게 해주었는데 rejectWithValue에서

이러한 경고문이 발생합니다.

또한

reducer에서

interface InitialState {
  loginError: string | null;
}

const initialState: InitialState = {
  loginError: null,
};

const userSlice = createSlice({

...

  .addCase(login.rejected, (state, action: PayloadAction<any>) => {
        state.loginError = action.payload;
      })

이부분에서InitialState에서 loginError는 어떠한 에러 타입을 지정해주어야 하며 login.rejected에서 에러가 들어올 경우 PayloadAction에는 어떠한 타입을 지정해주어야 하는지 궁금합니다!

 

즉 return rejectWithValue(error.message);에서는 어떻게 error.message를 보내주어야 하며

 

reducer에서 loginError에는 어떠한 초기값을 설정하고

payloadAction에서도 어떠한 타입을 지정해주어야 하는지 궁금합니다!

 

typescript

답변 1

0

제로초(조현영)

error.message가 갑자기 어디서 나오는 건가요? unknown이니 강좌대로 as를 또 쓰셔야 합니다.

참고로 axios.isAxiosError는 이제 제너릭을 지원합니다. 응답 데이터를 넣어서 인식시킬 수 있습니다.

https://github.com/axios/axios/pull/4344

PayloadAction에는 payload 타입을 넣어야 하니 rejectWithValue에 넘긴 값의 타입을 적으면 됩니다

타입 오버라이딩

0

79

2

React19에서 useRef 타입 정의의 변화

0

128

2

jQuery를 $로 한 번 더 감싼 형태

0

58

1

typescript interface를 jsdoc으로 주석달 때

0

234

2

declare module시 import 위치

0

198

2

declare global 로 선언된 타입을 확장하는게 아닌 좁히는것도 가능할가요?

0

148

2

typescript 강의를 보고 개발을 하다가 강의와 다른 내용인데 물어볼곳이 여기밖에 없어서 질문 드립니다.

0

237

1

강의에 필요한 사전준비와 예제 코드 첨부

1

311

1

local.ts 예제코드 첨부 합니다.

1

230

1

redux 예제코드 가져와서 강의 보면서 따라하는데

1

248

1

react 함수 컴포넌트 타이핑은 있는데 클래스 컴포넌트 타이핑 예제 코드가 없네요.

1

287

1

axios 1.6.0 버전으로 보고 있는데영

4

393

1

Module '"axios"' has no default export 에러 나시는분들

0

881

1

안녕하세요, 제로초님 타입스크립트 axios 분석 강의보고 궁금한점이 있어서 질문드립니다

1

389

1

안녕하세요. 제로초님 당신의 강의 매니아 입니다. typescript 모듈 관련 질문이 있어서요.

0

269

1

axios catch 에서 error 타입에 대해 as 없이 이렇게 사용하면 어떨까요?

0

406

1

global 선언 시 export {}

0

298

1

initialState가 제네릭 S인 이유가 잘 이해가 되지 않습니다.

0

313

1

declare module vs declare namespace

0

478

1

declare namespace vs namespace

0

500

2

"axios": "1.4.0" 버전 axios type 코드가 강의와 다릅니다!

0

561

1

Redux type 설정 과정에서 발생한 오류 질문 (ts[2345])

1

384

2

index.d.ts 에서 global declare 선언을 했을 때와 하지 않았을 때의 차이

0

409

1

미들웨어가 커링패턴으로 이루어진 이유

0

442

1