리덕스 툴킷 + axios 에러핸들링 질문드립니다

Question

안녕하세요. 지난번에 리덕스 툴킷관련해서 addCass로 여러 상태관리에 대해 많은 공부가 됐습니다. 단순 상태관리까지는 성공했는데 이제 axios를 붙이다보니 에러핸들링에 관련해서 궁금한점이 생겼습니다.     export const loginAsync = createAsyncThunk ( 'user/login' , async ( action ) => {   const { data } = action ;   return axios     . post ( 'http://localhost:5000/login' , data )     . then (( res ) => res . data )     . catch (( e ) => e ); });   이렇게 createAsyncThunk를 만들어서 통신을 하는데   대충 테스트용으로 만들어놓은 api에서   app . post ( '/login' , ( req , res , next ) => {   const { userId , userPassword } = req . body ;   if ( userId !== 'test' || userPassword !== '123' ) {     return res . status ( 403 ). json ({       login : false     });   } else {     return res . json ({       userName : '이름' ,       userAge : 00 ,       userJob : '초보 프론트엔드'     });   } })     이렇게 내보냈습니다. 성공했을때는 문제가 없으나 실패했을때가 문제입니다. 로그인 실패시   export const userSlice = createSlice ({   name : 'user' ,   initialState ,   reducers : {},   extraReducers : ( builder ) => {     builder       . addCase ( loginAsync . pending , ( state ) => {         state . logInLoading = true ;         state . logInError = null ;         state . logInDone = false ;       })       . addCase ( loginAsync . fulfilled , ( state , action ) => {         console . log ( '성공' )         // state.logInLoading = false;         // state.userInfo = action.payload;         // state.logInDone = true;       })       . addCase ( loginAsync . rejected , ( state , action ) => {         console . log ( '실패' )         // state.logInLoading = false;         // state.userInfo = null;         // state.logInError = action.payload.error;       })   } });     실패해도 fulfilled에 걸리게 됩니다. 403에러를 띄웠다면 saga에서는 failure액션에 걸렸던거같은데 툴킷은 다른거같아서 좀 검색해보니 rejectedValue? 라는 함수가 있다는데 임포트 해와도 에러만 날뿐입니다.   제가 청크 미들웨어를 한번도 안써봐서 이렇게 헤메는걸까요? 아니면 툴킷은 따로 에러핸들링 하는 방법이 있나요?

제로초(조현영) · Answer

catch를 붙이시면 안 됩니다. catch를 하는 순간 에러를 잡은 거라서 에러가 성공으로 바뀌게 됩니다.